SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript to hide/show elements

    I was wondering if someone could point me in the right direction.

    I have a webpage, that consists of about 30 definitions lists that look something like this.

    <div id="news">
    <h2>News</h2>
    <dl>
    <dt>Blah</dt>
    <dd>blah blah</dd>
    ...
    </dl>
    </div>

    I want to accomplish two things, one, to be able to hide/show the content of the list by adding a click event to the h2 tag. and two, produce a script that would hide or show certain elements that a user can choose from a dropdown menu.
    For example

    Option 1 will show list 1, 4, 6, 7, 9, and 10
    Option 2 will show list 2, 4, 5, 6, and 10
    etc.

    Is this possible and as my javascript knowledge is limited, where would I start?
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's something to experiment with:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Template</title>
    <script type='text/javascript'>
    window.onload = function()
    {
      setupH2Click('list1', 'list2', 'list3');
    }
    function setupH2Click()
    {
      var i, h2;
      for (i = 0; i < arguments.length; ++i)
      {
        h2 = getChild(arguments[i], 'h2');
        if (h2) h2.onclick = h2OnClick;
      }
    }
    function h2OnClick()
    {
      toggleDL(this.parentNode.id);
    }
    function toggleDL(containerID)
    {
      var dl = getChild(containerID, 'dl');
      if (dl)
      {
        if (dl.style.display == 'none')
          dl.style.display = 'block';
        else  
          dl.style.display = 'none';
      }
    }
    function getChild(containerID, childTag)
    {
      var con = document.getElementById(containerID);
      childTag = childTag.toLowerCase();
      var sib = con.firstChild;
      while (sib)
      {
        if (sib.nodeType == 1 && sib.nodeName.toLowerCase() == childTag)
          break
        else
          sib = sib.nextSibling;
      }
      //alert(childTag + ': ' + sib.nodeName);/////////
      return sib;
    }
    </script>
    </head>
    <body>
    
    <div id="list1">
    <h2>News</h2>
    <dl>
    <dt>Blah</dt>
    <dd>blah blah</dd>
    <dt>Blah</dt>
    <dd>blah blah</dd>
    </dl>
    </div>
    
    <div id="list2">
    <h2>News</h2>
    <dl>
    <dt>Blah</dt>
    <dd>blah blah</dd>
    <dt>Blah</dt>
    <dd>blah blah</dd>
    </dl>
    </div>
    
    <div id="list3">
    <h2>News</h2>
    <dl>
    <dt>Blah</dt>
    <dd>blah blah</dd>
    <dt>Blah</dt>
    <dd>blah blah</dd>
    </dl>
    </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
  •