Jump to content

Help with showHide function

dc_jt

By dc_jt
in Javascript Help

 Share

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>

Link to comment
Share on other sites
dc_jt Advanced Member

dc_jt

Posted
  • Author
Posted

Sorry Goose, it works perfectly in IE until I add my own styles.

 

I am putting a <div id="sidelinks"> at the very top and <li> before every <a href="#" id="resort" onclick="showHide(this); return false;">The Resort</a>

 

Is this OK or am I doing something wrong?

Link to comment
Share on other sites
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>

Link to comment
Share on other sites
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

Link to comment
Share on other sites
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>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
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.