Accordion Menu slideToggle
Hi all
I have a simple accordion menu using div’s for the buttons and containers.
www.ttmt.org.uk/openClose2.html
The sections slide down when the btn is clicked and any open sections are closed.
$('div.NavBtn').click(function() {
$('div.sideNavContent').slideUp('normal');
$(this).next().slideDown('normal');
});
$("div.NavContent").hide();
In this example the section opens when the btn is clicked and then closes if the btn is clicked again
www.ttmt.org.uk/openClose.html
$('div.NavBtn').click(function() {
$(this).next().slideToggle('normal');
});
$("div.NavContent").hide();
I want to combine both the actions into the same code.
If a btn is clicked it will open and close that section.
If a btn is clicked and another section is open the open sections will be closed.
I can’t see how to do both, can anyone help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="robots" content="noindex, nofollow" />
<title> </title>
<!--CSS-->
<style type="text/css" media="screen">
*{margin:0;padding:0;}
body{background:#ddd;}
#sideNav {background:white;overflow:auto;width:330px;border: 1px solid #ccc;margin:50px;}
#sideNav .NavBtn{
border-top:1px dashed #999;
color:#444;
cursor: pointer;
float: left;
text-decoration:none;
padding:14px 10px;
width: 310px;
}
#sideNav .NavContent{
float: left;
background:#f4f4f4;
width:330px;
}
#sideNav .NavContent p{
padding:10px;
}
</style>
</head>
<body>
<div id="sideNav">
<div class="NavBtn">
<h2>One </h2>
</div>
<div class="NavContent">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
</div>
<div class="NavBtn">
<h2>Two </h2>
</div>
<div class="NavContent">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
</div>
<div class="NavBtn">
<h2>Three </h2>
</div>
<div class="NavContent">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
</div>
</div><!--sideNav-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('div.NavBtn').click(function() {
$('div.NavContent').slideUp('normal');
$(this).next().slideDown('normal');
//$(this).next().slideToggle('normal');
});
$("div.NavContent").hide();
</script>
</body>
</html>