Jump to content

Help with showHide function

dc_jt

By dc_jt
in Javascript Help

Recommended Posts

Goose Member

Goose

Posted
Posted

It is working in IE for me (Win XP Pro, IE 6). Hmm... let me see. The problem with making functions more generic is when you want to do things like you mentioned. So I re-wrote the script for ya :) All I am doing here in addition to what you did before is that I am calling another function that I wrote and inside that function I am holding an array of all the sub divs. Hope this helps.

 

<html>
<head>
	<script type="text/javascript">
		function showHide(link) {
			var theDiv = document.getElementById(link.id + '_sub');
			if(theDiv.style.display == 'block'){
				theDiv.style.display = 'none';
				link.className = 'something';
			} else {
				theDiv.style.display = 'block';
				link.className = 'something_else';
				hideOtherSubs(link);
			}
		}
		function hideOtherSubs(link){
			var subs = new Array("resort_sub", "other_sub", "other2_sub");
			var i;
			var tempLinkId;
			for(i = 0; i < subs.length; i++){
				if(link.id + '_sub' != subs[i]){
					// change the sub div to no display
					document.getElementById(subs[i]).style.display = 'none';
					// change the parent link class
					tempLinkId = subs[i].substr(0, (subs[i].length - 4));
					document.getElementById(tempLinkId).className = 'something';
				}
			}
		}
	</script>
</head>
<body>
	<a href="#" id="resort" onclick="showHide(this); return false;">The Resort</a><br />
	<a href="#" id="other" onclick="showHide(this); return false;">Other</a><br />
	<a href="#" id="other2" onclick="showHide(this); return false;">Other2</a><br />

	<div id="resort_sub" style="display: none;">
		resort sub
	</div>
	<div id="other_sub" style="display: none;">
		other sub
	</div>
	<div id="other2_sub" style="display: none;">
		other2 sub
	</div>
</body>
</html>

Goose Member

Goose

Posted
Posted

That should be OK as long as you keep your sub links inside the correct sub link div. I would recommend that each sub link div have its own listing structure. Example:

 

<div id="sidelinks">
<ul>
	<li><a ...>The Resort</a></li>
	<li><a ...>Other</a></li>
</ul>
<div id="resort_sub">
	<ul>
		<li>Item 1</li>
		...
	</ul>
</div>
<div id="other_sub">
	<ul>
		<li>Item 1</li>
		...
	</ul>
</div>
</div>

dc_jt Advanced Member

dc_jt

Posted
  • Author
Posted

Everything is ok now regarding the styles and it passes validation etc. However, now when I click 'Business' for example, all the classes change to selected instead of just the business class??

 

Any idea why?

 

Here is my code:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<head>
	<script type="text/javascript">
		function showHide(link) {
			var theDiv = document.getElementById(link.id + '_sub');
			if(theDiv.style.display == 'block'){
				theDiv.style.display = 'none';
				link.className = '';
			} else {
				theDiv.style.display = 'block';
				link.className = 'selected';
				hideOtherSubs(link);
			}
		}
		function hideOtherSubs(link){
			var subs = new Array("resort_sub", "golf_sub", "special_sub", "business_sub", "occasions_sub", "relax_sub", "food_sub", "media_sub");
			var i;
			var tempLinkId;
			for(i = 0; i < subs.length; i++){
				if(link.id + '_sub' != subs[i]){
					document.getElementById(subs[i]).style.display = 'none';
					tempLinkId = subs[i].substr(0, (subs[i].length - 4));
					document.getElementById(tempLinkId).className = 'selected';
				}
			}
		}
	</script>
	<title></title>
</head>
<body>
<div id="sidelinks">

<ul>
<li><a href="#" id="resort" onclick="showHide(this); return false;">The Resort</a>
</li></ul>
<div id="resort_sub" style="display: none;">
<ul>
<li class="sub"><a href="#" class="sub_link">-   The Hotel</a></li>
<li class="sub"><a href="#" class="sub_link">-   Packages & Tarrifs</a></li>
<li class="sub"><a href="#" class="sub_link">-   Guest Book</a></li>
</ul></div>


<ul><li>
<a href="#" id="special" onclick="showHide(this); return false;">Special Offers</a>
</li></ul>
<div id="special_sub" style="display: none;">
</div>


<ul>
<li><a href="#" id="golf" onclick="showHide(this); return false;">Golf</a>
</li></ul>
<div id="golf_sub" style="display: none;">

<ul>
<li class="sub"><a href="#" class="sub_link">-   PGA Acadamy</a></li>
<li class="sub"><a href="#" class="sub_link">-   Golf Days</a></li>
<li class="sub"><a href="#" class="sub_link">-   The Old Course</a></li>
<li class="sub"><a href="#" class="sub_link">-   PGA Par 3 Course</a></li>
<li class="sub"><a href="#" class="sub_link">-   Memberships</a></li>
<li class="sub"><a href="#" class="sub_link">-   Golf Shop</a></li>
<li class="sub"><a href="#" class="sub_link">-   Golf Packages</a>
</ul></div>


<ul>
<li><a href="#" id="business" onclick="showHide(this); return false;">Business</a>
</li></ul>
<div id="business_sub" style="display: none;">

<ul>
<li class="sub"><a href="#" class="sub_link">-   Meetings & Events </a></li>
<li class="sub"><a href="#" class="sub_link">-   Room Capacities</a></li>
<li class="sub"><a href="#" class="sub_link">-   Corporate Packages </a></li>
</ul></div>


<ul>
<li>
<a href="#" id="occasions" onclick="showHide(this); return false;">Occasions</a>
</li></ul>
<div id="occasions_sub" style="display: none;">

<ul>
<li class="sub"><a href="#" class="sub_link">-   Weddings</a></li>
<li class="sub"><a href="#" class="sub_link">-   Banqueting</a></li>
<li class="sub"><a href="#" class="sub_link">-   Private Dining </a></li>
<li class="sub"><a href="#" class="sub_link">-   Room Capacities</a></li>
<li class="sub"><a href="#" class="sub_link">-   Occasion Packages</a></li>
</ul></div>


<ul>
<li>
<a href="#" id="relax" onclick="showHide(this); return false;">Relax</a>
</li></ul>

<div id="relax_sub" style="display: none;">
<ul>
<li class="sub"><a href="#" class="sub_link">-   Fitness & Leisure</a></li>
<li class="sub"><a href="#" class="sub_link">-   The Spa</a></li>
<li class="sub"><a href="#" class="sub_link">-   Relax Packages</a></li>
</ul></div>


<ul>
<li>
<a href="#" id="food" onclick="showHide(this); return false;">Food & Drink</a>
</li></ul>

<div id="food_sub" style="display: none;">
<ul>
<li class="sub"><a href="#" class="sub_link">-   Restaurants</a></li>
<li class="sub"><a href="#" class="sub_link">-   Bars</a></li>
</ul></div>


<ul>
<li>
<a href="#" id="media" onclick="showHide(this); return false;">Media Centre</a>
</li></ul>
<div id="media_sub" style="display: none;">

<ul>
<li class="sub"><a href="#" class="sub_link">-   News & Press</a> </li>
<li class="sub"><a href="#" class="sub_link">-   Press Enquiries </a></li>
<li class="sub"><a href="#" class="sub_link">-   Image Gallery</a></li>
</ul></div>


<ul>
<li>
<a href="#" >Contact Us</a></li><!--<li><a href="#" accesskey="7">Home</a></li>-->
</ul>	
<div class="clear"></div>

<div class="clear"></div>
</div>
	<div class="leftbox">
	<div class="corner1"><img src="/images/blank.gif" alt=""/></div><div class="corner2"><img src="/images/blank.gif" alt=""/></div>
	<div class="middle">
		<div class="middlewrapper">
		<img src="/images/mailinglist.gif" alt="Mailing List" />
		<input type="text" value="enter email" /><div style="float:left; width:55px;"><input type="button" class="button" style="width:50px;"value="Sign Up"/></div>
		<div style="float:left; width:20px; margin-top:2px;"><a href="#">Details</a></div>
	  </div>
	</div>
	<div class="corner3"><img src="/images/blank.gif" alt=""/></div><div class="corner4"><img src="/images/blank.gif" alt=""/></div>
	</div>
</body>
</html>

 

Thanks

dc_jt Advanced Member

dc_jt

Posted
  • Author
Posted

Hi I have the following code which works perfectly, however there are two headings - 'Special Offers' and 'Contact Us' which do not have any sub headings.

 

Once a heading is clicked the sub headings appear and the class changes to 'selected' (which is a down arrow).

When its not selected, it is an arrow pointing right.

 

At the moment, when I click Special Offers or Contact Us, the class still changes to 'selected' even if there is no sub links.

I want this to stay as the normal arrow.

 

How can I put that into the code below?

 

Thanks

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<head>
	<script type="text/javascript">
		function showHide(link) {
			var theDiv = document.getElementById(link.id + '_sub');
			if(theDiv.style.display == 'block'){
				theDiv.style.display = 'none';
				link.className = '';
			} else {
				theDiv.style.display = 'block';
				link.className = 'selected';
				hideOtherSubs(link);
			}
		}
		function hideOtherSubs(link){
			var subs = new Array("resort_sub", "golf_sub", "special_sub", "business_sub", "occasions_sub", "relax_sub", "food_sub", "media_sub", "contact_sub");
			var i;
			var tempLinkId;
			for(i = 0; i < subs.length; i++){
				if(link.id + '_sub' != subs[i]){
					document.getElementById(subs[i]).style.display = 'none';
					tempLinkId = subs[i].substr(0, (subs[i].length - 4));
					document.getElementById(tempLinkId).className = '';
				}
			}
		}
	</script>
	<title></title>
</head>
<body>
<div id="sidelinks">

<ul>
<li><a href="#" id="resort" onclick="showHide(this); return false;">The Resort</a>
</li></ul>

<div id="resort_sub" style="display: none;">
<ul>
<li class="sub"><a href="#" class="sub_link">-   The Hotel</a></li>
<li class="sub"><a href="#" class="sub_link">-   Packages & Tarrifs</a></li>
<li class="sub" style="margin-bottom:4px;"><a href="#" class="sub_link">-   Guest Book</a></li>
</ul></div>


<ul><li>
<a href="#" id="special" onclick="showHide(this); return false;">Special Offers</a>
</li></ul>
<div id="special_sub" style="display: none;">
</div>

<ul>
<li><a href="#" id="golf" onclick="showHide(this); return false;">Golf</a>
</li></ul>

<div id="golf_sub" style="display: none;">

<ul>
<li class="sub"><a href="#" class="sub_link">-   PGA Acadamy</a></li>
<li class="sub"><a href="#" class="sub_link">-   Golf Days</a></li>
<li class="sub"><a href="#" class="sub_link">-   The Old Course</a></li>
<li class="sub"><a href="#" class="sub_link">-   PGA Par 3 Course</a></li>
<li class="sub"><a href="#" class="sub_link">-   Memberships</a></li>
<li class="sub"><a href="#" class="sub_link">-   Golf Shop</a></li>
<li class="sub" style="margin-bottom:4px;"><a href="#" class="sub_link">-   Golf Packages</a>
</ul></div>


<ul>
<li><a href="#" id="business" onclick="showHide(this); return false;">Business</a>
</li></ul>
<div id="business_sub" style="display: none;">

<ul>
<li class="sub"><a href="#" class="sub_link">-   Meetings & Events </a></li>
<li class="sub"><a href="#" class="sub_link">-   Room Capacities</a></li>
<li class="sub" style="margin-bottom:4px;"><a href="#" class="sub_link">-   Corporate Packages </a></li>
</ul></div>


<ul>
<li>
<a href="#" id="occasions" onclick="showHide(this); return false;">Occasions</a>
</li></ul>
<div id="occasions_sub" style="display: none;">

<ul>
<li class="sub"><a href="#" class="sub_link">-   Weddings</a></li>
<li class="sub"><a href="#" class="sub_link">-   Banqueting</a></li>
<li class="sub"><a href="#" class="sub_link">-   Private Dining </a></li>
<li class="sub"><a href="#" class="sub_link">-   Room Capacities</a></li>
<li class="sub" style="margin-bottom:4px;"><a href="#" class="sub_link">-   Occasion Packages</a></li>
</ul></div>


<ul>
<li>
<a href="#" id="relax" onclick="showHide(this); return false;">Relax</a>
</li></ul>

<div id="relax_sub" style="display: none;">
<ul>
<li class="sub"><a href="#" class="sub_link">-   Fitness & Leisure</a></li>
<li class="sub"><a href="#" class="sub_link">-   The Spa</a></li>
<li class="sub" style="margin-bottom:4px;"><a href="#" class="sub_link">-   Relax Packages</a></li>
</ul></div>


<ul>
<li>
<a href="#" id="food" onclick="showHide(this); return false;">Food & Drink</a>
</li></ul>

<div id="food_sub" style="display: none;">
<ul>
<li class="sub"><a href="#" class="sub_link">-   Restaurants</a></li>
<li class="sub" style="margin-bottom:4px;"><a href="#" class="sub_link">-   Bars</a></li>
</ul></div>


<ul>
<li>
<a href="#" id="media" onclick="showHide(this); return false;">Media Centre</a>
</li></ul>
<div id="media_sub" style="display: none;">

<ul>
<li class="sub"><a href="#" class="sub_link">-   News & Press</a> </li>
<li class="sub"><a href="#" class="sub_link">-   Press Enquiries </a></li>
<li class="sub" style="margin-bottom:4px;"><a href="#" class="sub_link">-   Image Gallery</a></li>
</ul></div>


<ul><li>
<a href="#" id="contact" onclick="showHide(this); return false;">Contact Us</a>
</li></ul>
<div id="contact_sub" style="display: none;">
</div>

<div class="clear"></div>

<div class="clear"></div>
</div>
	<div class="leftbox">
	<div class="corner1"><img src="/images/blank.gif" alt=""/></div><div class="corner2"><img src="/images/blank.gif" alt=""/></div>
	<div class="middle">
		<div class="middlewrapper">
		<img src="/images/mailinglist.gif" alt="Mailing List" />
		<input type="text" value="enter email" /><div style="float:left; width:55px;"><input type="button" class="button" style="width:50px;"value="Sign Up"/></div>
		<div style="float:left; width:20px; margin-top:2px;"><a href="#">Details</a></div>
	  </div>
	</div>
	<div class="corner3"><img src="/images/blank.gif" alt=""/></div><div class="corner4"><img src="/images/blank.gif" alt=""/></div>
	</div>
</body>
</html>

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.