Good solution for this? jquery toggle on click

JavaScript
1

I have a big meny something like this:

<ul>
<li><button>Matrum</button>

								<div class="drop-down-main">
									<div class="wrapper">
										
									</div>
								</div>

							</li>
							<li><button>Sovrum</button>

								<div class="drop-down-main">
									<div class="wrapper">
										
									</div>
								</div>

							</li>
							<li><button>Hall</button>

								<div class="drop-down-main">
									<div class="wrapper">
										
									</div>
								</div>

							</li>
							<li><button>Allt sortiment</button>

								<div class="drop-down-main">
									<div class="wrapper">
										
									</div>
								</div>

							</li>
</ul>

And I want to toggle the drop-down menus on click. What is the best way to this?

$('button').click(function() {
$('.drop-down-main').toggle('fast');
});

This would show all drop downs i guess, is it possible to do this in some clean and nice way? I made this in an ugly way before where i gave all buttons and drop downs different id’s, and then did something like:

$('#button1').click(function() {
$('#drop-down1').toggle('fast');
$('#drop-down2').hide();
$('#drop-down3').hide();
$('#drop-down4').hide();
$('#drop-down5').hide();
});

and then repeated this for every button.

2

Sure you can :slight_smile:

The first thing to realise is that the button you click on can be referenced using this within the callback.
Once you know that you can do groovy stuff, such as just toggle the visibility of the next element:

$('button').click(function() {
    $(this).next().toggle('fast');
});

fiddle

3

Wonderful, thanks!=)

Is there any way to modifiy this so that it also closes already opened sub-menus?

4

You could do something like this:

$('button').click(function() {
    if ($(".drop-down-main").is(":visible")){
        $(".drop-down-main").slideUp();
    }
    $(this).next().toggle('fast');
});