www.webdeveloper.com
Results 1 to 4 of 4

Thread: How to close open DIVs when closed DIV is opened onClick

  1. #1
    Join Date
    Nov 2008
    Posts
    2

    Question How to close open DIVs when closed DIV is opened onClick

    Greetings all,

    I am definitely a javascript newbie and have been reading as much as I can on this forum (and elsewhere) so as to not waste your time.

    I am currently coding a scrolling header menu similar to the TimesPeople menu that can be found at http://nytimes.com.

    The menu I am working on can be viewed at http://onclicktheme.tumblr.com.

    Right now I'm using the following javascript to display hidden DIVs onClick:

    <script type="text/javascript">
    function part1() {
    var part1 = document.getElementById('tagsheaderbox');
    if ( part1.className == 'hidden' ) {
    part1.className = 'visible';
    } else {
    part1.className = 'hidden';
    }
    }
    </script>
    <script type="text/javascript">
    function part2() {
    var part2 = document.getElementById('aboutheaderbox');
    if ( part2.className == 'hidden' ) {
    part2.className = 'visible';
    } else {
    part2.className = 'hidden';
    }
    }
    </script>
    <script type="text/javascript">
    function part3() {
    var part3 = document.getElementById('contactheaderbox');
    if ( part3.className == 'hidden' ) {
    part3.className = 'visible';
    } else {
    part3.className = 'hidden';
    }
    }



    Here is the HTML/CSS that correlates with that Javascript:

    <a onclick="part3(); part3c();" href="#"><div id="contactheader" class="contactheaderclosed"><p>CONTACT</p></div></a>

    <a onclick="part2(); part2c();" href="#"><div id="aboutheader" class="aboutheaderclosed"><p>ABOUT</p></div></a>

    <a onclick="part1(); part1c();" href="#"><div id="tagsheader" class="tagsheaderclosed"><p>TAGS</p></div></a>

    .visible {
    display: visible;
    }

    .hidden {
    display: none;
    }

    #contactheaderbox {
    width: 315px;
    height: 250px;
    background: #fff;
    margin-left: 640px;
    top: 37px;
    position: fixed;
    background: url(http://i34.tinypic.com/20qnkop.png) repeat-y;
    }

    #aboutheaderbox {
    width: 315px;
    height: 250px;
    background: #fff;
    margin-left: 640px;
    top: 37px;
    position: fixed;
    background: url(http://i34.tinypic.com/20qnkop.png) repeat-y;
    }

    #tagsheaderbox {
    width: 315px;
    height: 250px;
    background: #fff;
    margin-left: 640px;
    top: 37px;
    position: fixed;
    background: url(http://i34.tinypic.com/20qnkop.png) repeat-y;
    }


    My question is... How can I have open (class="visible") DIV's close (class="hidden") onClick of closed (class="hidden") DIV's?

    I much appreciate any help in advance. Thank you.
    Last edited by hnovick; 11-30-2008 at 11:41 PM.

  2. #2
    Join Date
    Oct 2008
    Location
    U.S.
    Posts
    726
    First, you had some improperly nested things like div's inside of 'a' tags as well as 'p' tags inside of 'a' tags, so I fixed those.
    As you will see it is not necessary to have different functions for each div or for each different state of className either - it can be all handled from one function.
    You will note I gave the div (which contains the 3 div's you wish to toggle) an id of "topHeadContentWrap" -just to be able to loop through the div's that are inside of it looking for div's that have className of "visible", see further notes inside of script. I also changed your function calls from the 'a' tags to match the new name I gave the function, and you will notice the function calls are passing the id of the element to show in them, and the onclicks have a return false; in them to prevent the 'a' tags default action from occurring.

    Throw out all your other scripts you had in the page for toggling the divs and replace with the following script (also just for your info, different functions can be contained inside of the same set of script tags, no need for different set of script tags for each function):


    HTML Code:
    <script type="text/javascript">
    //pass the id (in single quotes) of the div you wish to show, in the function call
    function toggle(elemId){ 
      var a = document.getElementById(elemId);
    //get all the divs inside the topHeadContentWrap div (I gave it an id, it did not have one before)
      var b = document.getElementById("topHeadContentWrap").getElementsByTagName('div');
    //loop through all the divs in the topHeadContentWrap id'd div 
      for (var i = 0; i < b.length; i++) { 
    //if they don't have an identical id to the div we want to show, hide them. The && b[i].id != elemId allows to toggle the div later
        if (b[i].className === "visible" && b[i].id != elemId) { 
          b[i].className = "hidden";
        }
      }
    //toggle the div we are showing - if it is already shown, successive clicks will hide or show it
      a.className = (a.className === "visible")?"hidden":"visible";
    }
    </script>

    Then make the following changes inside of your html:


    HTML Code:
    <div class="tophead"> <!-- just posting this as a starting reference point -->
    
    <div id="topHeadContentWrap" class="topheadcontentwrap"> <!-- Note the id that has been added to this div -->
    
    <div id="avatarheader"><p><a href="/"><img src="/images/default_avatar_24.gif" width="24" height="24" border="0" alt="onClick"/></a></p></div>
    
    <div id="titleheader"><h6><a href="/">onClick</a></h6></div>
    
    <div id="contactheader" class="contactheaderclosed"><p><a onclick="toggle('contactheaderbox'); return false;" href="#">CONTACT</a></p></div>
    
    <div id="aboutheader" class="aboutheaderclosed"><p><a onclick="toggle('aboutheaderbox'); return false;" href="#">ABOUT</a></p></div>
    
    <div id="tagsheader" class="tagsheaderclosed"><p><a onclick="toggle('tagsheaderbox'); return false;" href="#">TAGS</a></p></div>
    <!-- end of my changes to your html -->

  3. #3
    Join Date
    Nov 2008
    Posts
    2

    thank you

    Thank you so much for your detailed help.

  4. #4
    Join Date
    Oct 2008
    Location
    U.S.
    Posts
    726
    You're welcome, glad to help!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles