www.webdeveloper.com
Results 1 to 4 of 4

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

Threaded View

  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 10:41 PM.

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