I have a big meny something like this:

Code HTML4Strict:
<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?

Code JavaScript:
$('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:

Code JavaScript:
$('#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.