Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript
This Script below works perfectly in firefox but fails to execute in Internet Explorer.Kindly copy and paste the script below to see it working.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..
 
Any help would be highly appreciated..
Thanks and Regards..Thumbs Up | :thumbsup:
 
<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>
<div>
 
<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>
</div>
Posted 11-Apr-10 21:16pm
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

The issue is with getElementsByName and the div element. You'll notice that document.getElementsByName will return a zero length array in IE.
 
http://msdn.microsoft.com/en-us/library/ms536438%28VS.85%29.aspx[^]
 
"This function does not return elements of type DIV and SPAN with that name, for some reason (unlike in Firefox). So use IDs instead (if you can...)"
 
There are a few different ways you can do this.
 
While I don't recommend jQuery for every little javascript problem, these sort of 'toggle' show\hide content can be handled very easily using it, maybe something to look into?
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

Dear Dylan!
Thanks for taking a look into the issue.
Yes i agree to what you say and certainly it is a problem with the getElementsByName and the div tag..
Well i have sorted out the issue now and for your reference i will paster the code below..
Thanks a lot for your time..
 
<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)
{
    var eleArray;
        if(document.getElementsByName)
        {
        if(window.ActiveXObject)
            eleArray = getElementsByName_iefix('div', 'hideGroup');
        else
            eleArray = document.getElementsByName('hideGroup');
 
            for(i=0;i<eleArray.length;i++)
            {
                    if(eleArray[i].id != theid)
                    {
                       eleArray[i].className = 'hide';
                    }
            }
        }
}
 
function getElementsByName_iefix(tag, name) {
 
     var elem = document.getElementsByTagName(tag);
     var arr = new Array();
     for(i = 0,iarr = 0; i < elem.length; i++) {
          att = elem[i].getAttribute("name");
          if(att == name) {
               arr[iarr] = elem[i];
               iarr++;
          }
     }
     return arr;
}
 
</script>
 

<style>
.hide
{
    display: none;margin-left:2px;margin-top:2px;
    text-decoration:blink;
    background-color:#FFC
}
.show
    {
        display: block;margin-left:2px;margin-top:2px;
        text-decoration:blink;
    }
</style>
<form action="" name="test" method="post">
<div style="margin-bottom:5px">
 
<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>
</div>
</form>
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

Yes that's certainly a way to do it. If you wanted to use jQuery, here's a bit of code that should be cross browser compatible & do the same thing.
 
<head>
    <script language="JavaScript" type="text/JavaScript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <style>
    .hide
    {
        display: none;
    }
    </style>
</head>
<body>
    <div>
    <a  href="#" class="menu1">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">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">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>
    </div>
    <script language="JavaScript" type="text/JavaScript">
     $(document).ready(function(){
        $('.menu1').bind('click', function() {
            $('.menu1').next().addClass('hide');
            $(this).next().removeClass('hide');
        });
     });
    </script>
</body>
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 4

Dear Dylan!
There is a small issue..
I hope you can help me resolve that..
Now i have a lot of these Div's which go beyond the screen size.
If i click the last link, the screen is automatically set to the top of the page..
The Div that is clicked should remain focussed and in order to view that i have to scroll the page down again to view that.
What i am saying is if a link is beyound the scope of the screen and if i click that the screen should remain their only rather than sending it back to the top of the page..
And the second issue is that if i click the same link twice it should automatically Expand on ist click and Contract on second click. It is expanding on the ist click but not contracting the div area back on the second click using jQuery..
Try this code and you will come to know the issue!!
 
<head>
    <script language="JavaScript" type="text/JavaScript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <style>
    .hide
    {
        display: none;
    }
    </style>
</head>
<body>
    <div>
    <a  href="#" class="menu1">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><br><br><br><br><br><br><br><br><br>
    <a href="#" class="menu1">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><br><br><br><br><br><br><br><br><br>
    <a href="#" class="menu1">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><br><br><br><br><br><br><br><br><br>
        <a  href="#" class="menu1">Menu 4</a>
        <div id="mymenu4" 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><br><br><br><br><br><br><br><br><br>
    <a href="#" class="menu1">Menu 5 </a>
        <div id="mymenu5" 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><br><br><br><br><br><br><br><br><br>
    <a href="#" class="menu1">Menu 6 </a>
        <div id="mymenu6" 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><br><br><br><br><br><br><br><br>
        <a  href="#" class="menu1">Menu 7</a>
        <div id="mymenu7" 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><br><br><br><br><br><br><br><br><br>
    <a href="#" class="menu1">Menu 8 </a>
        <div id="mymenu8" 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><br><br><br><br><br><br><br><br><br>
    <a href="#" class="menu1">Menu 9 </a>
        <div id="mymenu9" 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>
    </div>
    <script language="JavaScript" type="text/JavaScript">
     $(document).ready(function(){
        $('.menu1').bind('click', function() {
            $('.menu1').next().addClass('hide');
            $(this).next().removeClass('hide');
        });
     });
    </script>
</body>
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 5

Use bookmark with your hyperlink tags to keep focus
 
Simple 'toggle' function will make the div collapse on second click
 
You shouldn't really use the br tag to space your document, have a look at some CSS.
 
Here's the solution to your question
 
<head>
    <script language="JavaScript" type="text/JavaScript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <style>
    .hide
    {
        display: none;
    }
    </style>
</head>
<body>
    <div>
    <a  href="#menu1" class="menu1">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><br><br><br><br><br><br><br><br><br>
    <a href="#menu2" class="menu1">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><br><br><br><br><br><br><br><br><br>
    <a href="#menu3" class="menu1">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><br><br><br><br><br><br><br><br><br>
        <a  href="#menu4" class="menu1">Menu 4</a>
        <div id="mymenu4" 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><br><br><br><br><br><br><br><br><br>
    <a href="#menu5" class="menu1">Menu 5 </a>
        <div id="mymenu5" 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><br><br><br><br><br><br><br><br><br>
    <a href="#menu6" class="menu1">Menu 6 </a>
        <div id="mymenu6" 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><br><br><br><br><br><br><br><br>
        <a  href="#menu7" class="menu1">Menu 7</a>
        <div id="mymenu7" 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><br><br><br><br><br><br><br><br><br>
    <a href="#menu8" class="menu1">Menu 8 </a>
        <div id="mymenu8" 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><br><br><br><br><br><br><br><br><br>
    <a href="#menu9" class="menu1">Menu 9 </a>
        <div id="mymenu9" 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>
    </div>
    <script language="JavaScript" type="text/JavaScript">
     $(document).ready(function(){     
		$(".menu1").toggle(
		  function () {
			$('.menu1').next().addClass('hide');
			$(this).next().removeClass('hide');
		  },
		  function () {
			$('.menu1').next().addClass('hide');
		  }
		);     
     });
    </script>
</body>
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 6

Dear Dylan!
I found it very interesting and i might start using jQuery rather than Javascript because the code is so compact.
And those br tags which i had used in the example was only for the example so that i can extend the page. Smile | :) , i would never do something like that in my programming.. I always implement that stuff through css..Thumbs Up | :thumbsup:
 
Your concern was highly appreciable and i hope that we can have some more cross issue talks in near future..
 
Thanks Man and keep me posting your updates if you have some..
Thumbs Up | :thumbsup: and have a great time!!!!!
  Permalink  

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

  Print Answers RSS
0 Richard MacCutchan 269
1 Aajmot Sk 252
2 Marcin Kozub 235
3 Sergey Alexandrovich Kryukov 185
4 Praneet Nadkar 167
0 OriginalGriff 7,913
1 Sergey Alexandrovich Kryukov 7,232
2 DamithSL 5,604
3 Manas Bhardwaj 4,986
4 Maciej Los 4,865


Advertise | Privacy | Mobile
Web02 | 2.8.1411023.1 | Last Updated 13 Apr 2010
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100