ultrajam 3rd party developer
Timeline blog documentation followers forum marketplace

How To Show/Hide An Element

Ultrajam » Documentation » Code » How To Show/Hide An Element

  • Show/hide with jQuery

    This isn't a difficult thing to do.

    You need a link or a button (something clickable) and a hidden element. You can initially hide your element using style="display: none;" or set the display to "none" in a css rule and add the classname to the element. 
    <a onclick="$('#mydiv').slideToggle()"><b>View Hidden Content</b></a>

<div id="mydiv" style="display: none;">
    Here is my content.
</div>
  • Of course there is a limit to how much you want to put into your onclick functions. If you have a list of things to trigger when the onclick is run, or if you are going to be using the same onclick over and over, you would most likely want to put that list of "things to do onclick" into a javascript function and then use that js function in the onclick. 
    <a onclick="myModule_myfunction();">Show content and change bg color</a>
  • Your js function (in the myModule.js if it is needed everywhere, or by creating a page element if it is only needed on the page or for the module) might look like this: 
    function myModule_myfunction()
{
    $('#mydiv').slideToggle();
    alert('now you can see the div'); 
    alert($('#mydiv').text());
}

Tags