Div show/hide question

Status
Not open for further replies.
B

BradM

Banned
Jan 18, 2007
437
3
0
Orange County, CA
I have found a lot of show/hide codes. The one I recently found was PERFECT, until I realized it does one thing wrong:

When I click a link, it opens the content in my content area. Perfect. But if I click another link, it opens the content above or below the other active div depending on where it is coded on the page. I need the second click to close any other active layers. Anyone know how that is possible?

Thanks!
 


Found the one I was playing with. Not the most efficient I am sure, but it works for me.

Code: 
<html>
    <head>    
        <title>Test Menu</title>
        
        <script language="JavaScript">
            function menu(id) {
                var state = document.getElementById(id).style.display;
                document.getElementById(2).style.display = 'none';
                document.getElementById(3).style.display = 'none';
                document.getElementById(4).style.display = 'none';
                document.getElementById(5).style.display = 'none';
                document.getElementById(6).style.display = 'none';
                document.getElementById(7).style.display = 'none';
                if (state == 'none') {
                    document.getElementById(id).style.display = 'block';
                } else {
                    document.getElementById(id).style.display = 'none';
                }
            } 
        </script> 
        

    </head>
    
    <body>
    
    <div id='1' style='background-color: #00cc00;'> 
        <a href="#" onclick="menu('2');">Show Menu 2</a>  | 
        <a href="#" onclick="menu('3');">Show Menu 3 </a> |
        <a href="#" onclick="menu('4');">Show Menu 4</a>  | 
        <a href="#" onclick="menu('5');">Show Menu 5 </a> |
        <a href="#" onclick="menu('6');">Show Menu 6</a>  | 
        <a href="#" onclick="menu('7');">Show Menu 7 </a>
    </div>
    <div id='2' style='background-color: lightblue; display:none;'> This is menu 2</div>
    <div id='3' style='background-color: lightgray; display:none;'> This is menu 3</div>
    <div id='4' style='background-color: red; display:none;'> This is menu 4</div>
    <div id='5' style='background-color: green; display:none;'> This is menu 5</div>
    <div id='6' style='background-color: yellow; display:none;'> This is menu 6</div>
    <div id='7' style='background-color: blue; display:none;'> This is menu 7</div>
    
    </body>
</html>
Basically all it does it set all to display: none and then toggle the one you selected to be visible. Let me know if you need help. It is still a bit buggy. click.
 
Status
Not open for further replies.
Top Bottom