Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: div menu?

  1. #1
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    div menu?

    Hi there all!!

    I have a menu script so far that looks like this:

    java script:

    Code:
    <script LANGUAGE="JavaScript">
    <!--
    function showHide(elementid){
    if (document.getElementById(elementid).style.display == 'none'){
    document.getElementById(elementid).style.display = '';
    } else {
    document.getElementById(elementid).style.display = 'none';
    }
    }
    //-->
    </SCRIPT>
    HTML:

    Code:
    	<a href="#welcome" onClick="java script:showHide('welcome')">
    <div class="button" id="welcomeb"><strong>welcome</strong></div></a>
    	<div id="welcome" class="box">Welcome to Blah...!</div>
    
    	<a href="#about" onClick="java script:showHide('about')">
    <div class="button" id="aboutb"><strong>about</strong></div></a>
    	<div id="about" class="box" style="display:none;">LALALA</div>
    I was wondering how I could modify it, so that when I click on one menu link, the other menu DIVs will close?

    A quick response will be HUGELY appreciated!

    Peace,
    Ant..

  • #2
    Regular Coder
    Join Date
    Dec 2006
    Posts
    417
    Thanks
    168
    Thanked 1 Time in 1 Post
    set document.getElementById(elementid).style.display to display none for the alternating div.. you are almost there. 2 more lines of code should do it

  • #3
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Soz... I'm a bit of a n00b at javascript.

    What is the actual code I need to achieve this?

    Thanks HEAPS!!

  • #4
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <script type="text/javaScript">
    document.getElementsByClassName = function(c){
    var el = [], found = [];
    if(document.getElementsByTagName) {
    el = document.getElementsByTagName('*');
    for(var i = 0; i < el.length; i++) {    
    if(el[i].className === c) { found.push(el[i]); }
    el[i] = null;
    }
    }
    return found;
    };
    
    function showHide(elementid){
    var divs = document.getElementsByClassName('box');
    for(var i = 0; i< divs.length; i++){
    if(divs[i] == document.getElementById(elementid)) { divs[i].style.display = "block";}
    else { divs[i].style.display = "none";}
    }
    }
    
    </script>
    Worked brilliantly for me...

    Peace,
    Ant..


  •  

    Posting Permissions

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