I have one div and I want it not to be visible by default. I want javascript that can allow me to click on some link to display that div and it's content.After page refreshes I want that div to be invisible again(default) I tried lot of ready made codes but none of them worked. Can you help me? Detailed explanation would be cool since I don't know anything about javascript.
Just give the div a style of display:none, then when they click the link call a javascript function to show the div. <html> <body> <div id="HiddenDiv" style="display:none;">Content</div> <a href="javascript:ShowDiv()">Show Div</a> or <div onclick="ShowDiv()">Click Me</div> <script language="javascript"> function ShowDiv() { document.getElementById("HiddenDiv").style.display = ''; } </script> or do the same effect using a style sheet ..make one class hidden the other visible then in script do: document.getElementById("HiddenDiv").className = newclassname
You need to put curly brackets in a {literal}...{/literal} block to tell Smarty not to try to parse it as a Smarty tag. Something like this: <script type="text/javascript"> {literal} function showDiv() { document.getElementById("HiddenDiv").style.display = "block"; } {/literal} </script> P.S.: You may also want to make the "Click Me" or "Show Div" invisible after it' s clicked (because it no longer makes sense after it's clicked once), with similar way as the above, just that setting the "display" to "none" instead of "block".