How to target this dropdown on button click?

What I want to do is target the class .dropdown when clicking the <button>, and only target the dropdown in the button’s sibling .dropdown-container.

This is the HTML:

<ul>
				<li><button>link1</button>

					<div class="dropdown-container">
						<div class="row">

						</div>
					</div>

				</li>
				<li><button>link2</button>

					<div class="dropdown-container">
						<div class="row">

						</div>
					</div>

				</li>
</ul>

And this is my current jQuery:

$('ul li button').on('click', function(){
	$('ul li button').next('.dropdown-container').slideToggle(100);
});

But my jquery targets all .dropdown-container classes, but I only want to target the one inside the same parent as the button.

Can anyone help me?

Go up to the parent and find the element you are looking for. Use $(this) to target the element that is triggering the event.

Something like this:

$('ul li button').click( function(){
	$(this).parent().find('.dropdown-container').slideToggle(100);
});

E

Thanks dude works fine!=)

Do you know if I could evolve it further so that if another .dropdown-container is visible, it is hidden upon opening another?

Sure, you would close any open tabs before opening the current tab. For identification, you can add a class “open” when a tab is opened. You could also test for css display properties with an if statement.

Something like this should work:

//toggle any open tabs shut and remove the 'open' class
$('.dropdown-container.open').slideToggle(100).removeClass('open');

//add an open class when opening a tab
$('ul li button').click( function(){
	$(this).parent().find('.dropdown-container').addClass('open').slideToggle(100);
});