Show on click javascript

Discussion in 'JavaScript' started by balkanboy, Aug 26, 2006.

0
  1. #1
    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.
     
    balkanboy, Aug 26, 2006 IP
  2. mjamesb

    mjamesb Member

    Messages:
    88
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    48
    #2
    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
     
    mjamesb, Aug 26, 2006 IP
    Napoleon likes this.
  3. balkanboy

    balkanboy Banned

    Messages:
    1,950
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks but it didn't work because I wanted to use it in combinarion with smarty.
     
    balkanboy, Aug 27, 2006 IP
  4. phper

    phper Active Member

    Messages:
    247
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #4
    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".
     
    phper, Aug 27, 2006 IP