Untoggle Previous Menus on click of the Next Menu Header
I have created a menu using CSS and Javascript. When I click on a menu topic (Header) it gets toggled and shows the sub categories.
What I need it to do is.. when I click on any other menu headers the previously toggled (shown) sub category should untoggle (hide) and the currently active menu header should be toggled with its sub categories. How can I achieve this?
here is my code..
$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effe开发者_JAVA技巧ct set to slow you can set it to fast too.
$(this).next(".togglebox").slideToggle("slow");
$(".toggleBox").hide();
return true;
});
});
HTML
now it is kind of OK, but there are some weird movements when I click on it. Here is my remaining HTML code.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="toggle.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<td>
<h2 style="background-color:#DAD0D0;">NOKIA</h2>
<div class="togglebox">
<div class="content">
<center><a href="#" style="text-decoration:none;"> NOKIA 8320 </a></center>
</div>
</div>
<h2 style="background-color:#EEE6E6;">SAMSUNG</h2>
<div class="togglebox">
<div class="content">
<center><a href="#" style="text-decoration:none;">SAMSUNG 3242C </a></center>
<center><a href="#" style="text-decoration:none;">SAMSUNG 3423C </a></center>
<center><a href="#" style="text-decoration:none;">SAMSUNG 7642C </a></center>
</div>
</div>
<h2 style="background-color:#DAD0D0;">SONY ERICSSON</h2>
<div class="togglebox">
<div class="content">
<center><a href="#" style="text-decoration:none;">SAMSUNG 3242C </a></center>
<center><a href="#" style="text-decoration:none;">SAMSUNG 3423C </a></center>
<center><a href="#" style="text-decoration:none;">SAMSUNG 7642C </a></center>
</div>
</div>
<h2 style="background-color:#EEE6E6;">ALCATEL</h2>
<div class="togglebox">
<div class="content">
<center><a href="#" style="text-decoration:none;">SAMSUNG 3242C </a></center>
<center><a href="#" style="text-decoration:none;">SAMSUNG 3423C </a></center>
<center><a href="#" style="text-decoration:none;">SAMSUNG 7642C </a></center>
</div>
</div>
</td>
<td width="70%">
</td>
</tr>
</table>
</body>
</html>
CSS
h2 {
padding:10px;
font-size:10px;
color:#243953;
/* border: 1px solid #a9a9a9;
-moz-border-radius: 7px; /* Rounder Corner
-webkit-border-radius: 7px;
-khtml-border-radius: 7px; */
text-align:center;
font-family:Arial, Helvetica, sans-serif;
margin-bottom:10px;
margin: 0px;
}
.togglebox {
background-color:#F7F3F3;
border: 0px solid #a9a9a9;
/* Rounder Corner */
/* -moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px; */
overflow: hidden;
font-size: 1.2em;
width: 196px;
clear: both;
margin-bottom:0px;
margin-top:0px;
}
.togglebox .content {
padding: 20px;
// slide toggle effect set to slow you can set it to fast too.
$(".togglebox").hide();
$(this).next(".togglebox").slideToggle("slow");
you have a capital 'B' in your hide code, $(".toggleBox").hide(); and you should swap the order of the actions hide all the "toggleboxes" (not the current one though, see below) first before triggering the H2's next slidedown
Example JSFIDDLE
edited as the above code means you can't toggle the current togglebox
// slide toggle effect set to slow you can set it to fast too.
var tb = $(this).next(".togglebox");
$(".togglebox").not(tb).slideUp();
$(tb).slideToggle("slow");
Because of later addition of more code to question;
Updated JSFiddle
I prepared a DEMO H E R E
Let me know if this suits your needs.
加载中,请稍侯......
精彩评论