jQuery slideToggle()

Zeke Rich
Zeke Rich used Ask the Experts™
on
Hi, i am new to javascript and i need some help please. When i open a new div with .slideToggle i want it to close the other divs with .slideToggle. Right now i am using :hide but it is not the right way. I would rather use .slideToggle but i dont know how to do it. Can you please help? I only want one div open at a time.

<div class="magic" id="page1">some text in here</div>
<div class="magic" id="page2">some text in here</div>
<div class="magic" id="page3">some text in here</div>
<div class="magic" id="page4">some text in here</div>

<a href="#" class="toggle" id="1">About Us</a></li>
<a href="#" class="toggle" id="2">About Us</a></li>
<a href="#" class="toggle" id="3">About Us</a></li>
<a href="#" class="toggle" id="4">About Us</a></li>

Open in new window


			
$(".toggle").click(function(){
$(".magic").hide();
var id = $(this).attr('id');
$("#page"+ id).slideToggle('slow');
});

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
There is a jquery plugin to do exactly what you want, it is called accordion. Accordion only lets one div be open and closes any other open ones...

http://jqueryui.com/demos/accordion/
try this:
$(".toggle").click(function(){
$(".magic").slideUp('slow');
var id = $(this).attr('id');
$("#page"+ id).slideToggle('slow');
});
I would also change your slideToggle to slideDown, I believe it will give you what you want.
Zeke RichOwner

Author

Commented:
Awesome

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial