Solved

Modify show/hide script to close a div when open a new one

Posted on 2008-06-10
12
1,556 Views
Last Modified: 2013-11-19
Hi,

I have a show/hide script that im using, using onmouseover to show/hide divs.

What I need help is, when user mouses over toggle2 link, it closes toggle1 div and opens toggle2 div, and so on.

At the moment all toggle divs will open and only close when you mouseover the toggle link again.

I have attached the full code im working on for ease of understanding.
<html><head>

<title>Rollover</title>

<style type="text/css">

.toggleBox {

	background: #ccc;

	margin: 10px 0;

	padding: 10px;

}

.toggleBox p.toggleLink {

	margin: 0;

	padding: 10px;

}

.toggleBox p.toggleLink a.link {

	text-decoration: underline;

	cursor: pointer;

}

.toggleBox .toggleContent {

	background: #fff;

	padding: 10px;

}

.toggleBox .toggleContent p {

	margin: 0;

}

</style>

<script type="text/javascript">

	function showhide(id){

		if (document.getElementById){

			obj = document.getElementById(id);

			if (obj.style.display == "none"){

				obj.style.display = "";

			} else {

				obj.style.display = "none";

			}

		}

	}

</script>

</head><body>
 

<div class="toggleBox">

	<p class="toggleLink"><a class="link" onmouseover="showhide('onmouseover'); return(false);">Show/hide on mouseover</a></p>

	<div class="toggleContent" id="onmouseover">

		<p>On mouseover content toggle</p>

	</div>

</div>
 

<div class="toggleBox">

	<p class="toggleLink"><a class="link" onmouseover="showhide('onmouseover2'); return(false);">Show/hide on mouseover</a></p>

	<div class="toggleContent" id="onmouseover2">

		<p>On mouseover content toggle</p>

	</div>

</div>

</body></html>

Open in new window

0
Comment
Question by:danwpeters
  • 7
  • 5
12 Comments
 

Author Comment

by:danwpeters
ID: 21751325
togglle1, toggle2 is referring to onmouseover, onmouseover2 id's.
0
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21751451
Hmm well your function is only targetting the id it has been passed, it's unaware of the prescence of anything else in the document only what it's told.

If you know you have a set amount of boxes you can look at the ID being passed in and then alter the states of the other boxes.

On the principle that only 1 box is ever open at 1 time, then you can adapt your existing function to look at the state of the current box - it's already in there # if (obj.style.display == "none") # this determines if it's there or not (visible) if it's currently not visible then it opens it...

You need to just adapt it to close all boxes (which you can do because you have the IDs) and then run the existing line

obj.style.display = "";

which makes the current box (the one you want to open) visible.

Next time you click a different box, all boxes close (so the 1st one you opened) and then your script opens the current box (the new one)
0
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21751481
what Im basically trying to say is the element of your function (below) needs to close ALL your boxes first and then it will open the one you want.

If none are open it just opens it - this will give the effect that when a box is open it will close all of them and open the new one because thats the only box the function knows to operate (open)
if (obj.style.display == "none"){

 document.getElementById("box1").style.display = ""; 

 document.getElementById("box2").style.display = ""; 

 document.getElementById("box3").style.display = ""; 

 obj.style.display = ""; // this makes current box visible

} else {

 obj.style.display = "none";

}

Open in new window

0
 

Author Comment

by:danwpeters
ID: 21751715
Hi, thanks, but this doesn't seem to be working correctly, I get how your adapted code works, but am really only starting with JavaScript, could you help me a little more please?
0
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21751797
Yeah sure let me figure out the mechanics and I will get back to you with a working model - my example was more of a guidline.
0
 
LVL 10

Accepted Solution

by:
bluefezteam earned 100 total points
ID: 21751901
as a quick glance this should achieve something instantly:

when I mouse over any box they both shut and there on in only 1 opens at a time

hope that helps.
<html><head>

<title>Rollover</title>

<style type="text/css">

.toggleBox {

	background: #ccc;

	margin: 10px 0;

	padding: 10px;

}

.toggleBox p.toggleLink {

	margin: 0;

	padding: 10px;

}

.toggleBox p.toggleLink a.link {

	text-decoration: underline;

	cursor: pointer;

	display:block;

}

.toggleBox .toggleContent {

	background: #fff;

	padding: 10px;

}

.toggleBox .toggleContent p {

	margin: 0;

}

</style>

<script type="text/javascript">

	function showhide(id){

		if (document.getElementById){

			obj1 = document.getElementById("onmouseover");

			obj2 = document.getElementById("onmouseover2");
 

			obj = document.getElementById(id);

			if (obj.style.display == "none"){

				obj1.style.display = "none";

				obj2.style.display = "none";
 

				obj.style.display = "";

			} else {

				obj1.style.display = "none";

				obj2.style.display = "none";
 

				obj.style.display = "none";

			}

		}

	}

</script>

</head><body>

 

<div class="toggleBox">

	<p class="toggleLink"><a class="link" onmouseover="showhide('onmouseover'); return(false);">Show/hide on mouseover</a></p>

	<div class="toggleContent" id="onmouseover">

		<p>On mouseover content toggle</p>

	</div>

</div>

 

<div class="toggleBox">

	<p class="toggleLink"><a class="link" onmouseover="showhide('onmouseover2'); return(false);">Show/hide on mouseover</a></p>

	<div class="toggleContent" id="onmouseover2">

		<p>On mouseover content toggle</p>

	</div>

</div>

</body></html>

Open in new window

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 10

Expert Comment

by:bluefezteam
ID: 21751931
If you need to add more divs then they need to be added to the function, it all stems from the fact that the original function only targetted the div it was passed during mouseover.

The function was given no other info to act on so it didnt know about the other items.
0
 

Author Comment

by:danwpeters
ID: 21751945
Thanks, is there any way of stopping the box from hiding if you mouse over an already active link?
0
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21752026
hey thats a seperate question, I only get 100 points :0P

The easiest option is to not to bother with mouseover, it's too fiddly especially if you accidentally touch the area. Opt for onClick instead - much more accurate to a users needs - when a user clicks it you know for a fact that they want to open or close that box.


<div class="toggleBox">

	<p class="toggleLink"><a class="link" onclick="showhide('onmouseover'); return(false);">Show/hide on mouseover</a></p>

	<div class="toggleContent" id="onmouseover">

		<p>On mouseover content toggle</p>

	</div>

</div>

 

<div class="toggleBox">

	<p class="toggleLink"><a class="link" onclick="showhide('onmouseover2'); return(false);">Show/hide on mouseover</a></p>

	<div class="toggleContent" id="onmouseover2">

		<p>On mouseover content toggle</p>

	</div>

</div>

Open in new window

0
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21752049
If you post that as a new question (which it is), I can receive additional points for further assistance.

I would say the onClick is much better for the user anyway.
0
 

Author Closing Comment

by:danwpeters
ID: 31465742
Awsome help ;-)
0
 

Author Comment

by:danwpeters
ID: 21752235
I will try and opt for an onclick probably, thanks again ;-)
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now