How to Hide DIV tags in Java Script

Question

0.00/5 (No votes)

See more:

If you see at this problem it is working fine but what i require is that once i click 'MENU1' that expands and displays the sublinks and when i click it again it hides the sublinks. It is fine till here.. Now what i require is if i click 'MENU1' and it is still in visible state and i click 'MENU2' or 'MENU3' then the previous open Menu i.e(MENU1) should hide its sublinks and the one clicked should display its sublinks. So conclusion is that only sublinks of one group can be viewed at a time and hiding the rest..
Thanks in advance and i appreciate if anyone can sort me a solution.. Thanks

Here is the CODE. Copy and paste it to see it working..
Thanks

XML

<script language="JavaScript" type="text/JavaScript">
<!--
menu_status = new Array();

function showHide(theid)
{
    if (document.getElementById)
    {
    var switch_id = document.getElementById(theid);
            if(menu_status[theid] != 'show')
        {
           switch_id.className = 'show';
           menu_status[theid] = 'show';
        }
        else
        {
           switch_id.className = 'hide';
           menu_status[theid] = 'hide';
        }

    }
}
//-->
</script>
<style>

.hide{
display: none;
margin-left:2px;
margin-top:2px;
}

.show{
display: block;
margin-left:2px;
margin-top:2px;
}
</style>
<a  href="#" class="menu1" onclick="showHide('mymenu1')">Menu 1</a>
    <div id="mymenu1" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div><br>
<a href="#" class="menu1" onclick="showHide('mymenu2')">Menu 2 </a>
    <div id="mymenu2" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div><br>
<a href="#" class="menu1" onclick="showHide('mymenu3')">Menu 3 </a>
    <div id="mymenu3" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div>

Posted 11-Apr-10 1:40am

khanishfaq82

Updated 11-Apr-10 1:45am

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Jitendra Zaa · Answer 1 · 2010-04-11T04:10:00

Hi,
Please check below script, its working fine.
I have made some changes in your script. I hope it fulfills your requirement.

HTML

<script language="JavaScript" type="text/JavaScript">
<!--

function showHide(theid)
{

    if (document.getElementById)
    {
       HideOthers(theid);
       var switch_id = document.getElementById(theid);
        if(switch_id.className == 'hide')
        {
           switch_id.className = 'show';
        }
        else
        {
           switch_id.className = 'hide';
        }
    }
}
function HideOthers(theid)
{
    if(document.getElementsByName)
    {
        var eleArray = document.getElementsByName('hideGroup');
        for(i=0;i<eleArray.length;i++)
        {
            if(eleArray[i].id != theid)
            {
                eleArray[i].className = 'hide';
            }
        }
    }
}
//-->
</script>
<style>

.hide{
display: none;
margin-left:2px;
margin-top:2px;
}

.show{
display: block;
margin-left:2px;
margin-top:2px;
}
</style>
<a  href="#" class="menu1" onclick="showHide('mymenu1')">Menu 1</a>
    <div name="hideGroup" id="mymenu1" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div><br>
<a href="#" class="menu1" onclick="showHide('mymenu2')">Menu 2 </a>
    <div name="hideGroup" id="mymenu2" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div><br>
<a href="#" class="menu1" onclick="showHide('mymenu3')">Menu 3 </a>
    <div name="hideGroup" id="mymenu3" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div>

khanishfaq82 · Answer 2 · 2010-04-11T05:13:00

Dear Zaa!

Thanks for the response and i highly appreciate your concern towards the issue but we have a little problem over here.. The code you have posted is working in Mozilla Firefox :), but it is not working in Internet Explorer :( ..
Can you sort out something in that regard..
Thanks Man..
Waiting for your reply..

How to Hide DIV tags in Java Script

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0