Home/ Questions/Q 5840507
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T11:45:23+00:00

I have created a menu using CSS and Javascript. When I click on a

  • 0

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 effect 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;
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    // 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

    • 0