SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    boiler up blackdog's Avatar
    Join Date
    Jul 2002
    Location
    Purdue
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Quick question on hiding a div

    I'm trying to make a show/hide button for a div. I've got a little code that works great. only problem is it shows the div by default and I want it to hide by default. Anyone know how I can do this? Thanks!

    Here's the code:

    Code:
    <HTML>
    <HEAD>
    <script language="javascript">
    function toggleDiv(divid){
    if(document.getElementById(divid).style.display == 'none'){
    document.getElementById(divid).style.display = 'block';
    }else{
    document.getElementById(divid).style.display = 'none';
    }
    }
    </script>
    </HEAD>
    <BODY>
    <a href="javascript:;" onmousedown="toggleDiv('list');">Toggle Div Visibility</a>
    <div id="list">hello</div>
    </BODY>
    </HTML>
    

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If you want it to be hidden by default, best thing is to use CSS:
    HTML Code:
    <html>
    <head>
    <script type="text/javascript">
    window.onload = function() {
      document.getElementById('togglelist').onclick = function() {
        var li = document.getElementById('list');
        if (li.className === 'hidden') li.className = '';
        if (li.className === '') li.className = 'hidden';
      }
    }
    </script>
    <style type="text/css">
    .hidden {display:none}
    </style>
    </head>
    <body>
      <a href="#" id="togglelist">Toggle Div Visibility</a>
      <div id="list" class="hidden">hello</div>
    </body>
    </html>
    Less mess in the HTML that way. Don't use the "language" attribute in script tags, use the "type" attribute. Also, don't forget a DOCTYPE and to validate your markup.

  3. #3
    boiler up blackdog's Avatar
    Join Date
    Jul 2002
    Location
    Purdue
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help, but your code doesn't seem to be working for me.

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <HTML>
    <HEAD>
    <script type="text/javascript">
    function toggleDiv(divid){
    if(document.getElementById(divid).style.display == 'none'){
    document.getElementById(divid).style.display = 'block';
    }else{
    document.getElementById(divid).style.display = 'none';
    }
    }
    </script>
    </HEAD>
    <BODY>
    <a href="#" onmousedown="toggleDiv('list'); return false;">Toggle Div Visibility</a>
    <div id="list" style="display:none">hello</div>
    </BODY>
    </HTML>

  5. #5
    boiler up blackdog's Avatar
    Join Date
    Jul 2002
    Location
    Purdue
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks!

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Oh yeah, I made a pretty stupid mistake. Both if statements resolved to "true", so the div was being unhidden and then immedately after hidden again.

    This works:
    HTML Code:
    <html>
    <head>
    <script type="text/javascript">
    window.onload = function() {
      document.getElementById('togglelist').onclick = function() {
        var li = document.getElementById('list');
        if (li.className === 'hidden') li.className = '';
        else if (li.className === '') li.className = 'hidden';
      }
    }
    </script>
    <style type="text/css">
    .hidden {display:none}
    </style>
    </head>
    <body>
      <a href="#" id="togglelist">Toggle Div Visibility</a>
      <div id="list" class="hidden">hello</div>
    </body>
    </html>

  7. #7
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    <HTML>
    <
    HEAD>
    <
    script type="text/javascript">
    function 
    toggleDiv(){
    var 
    el document.getElementById("list");
    el.style.display = (el.style.display =="block") ? "none" "block";
    }
    </script>
    </HEAD>
    <BODY>
    <a href="javascript:void(0);" onclick="toggleDiv();">Toggle Div Visibility</a>
    <div id="list" style="display:none;">hello</div>
    </BODY>
    </HTML> 


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •