Как открыть/закрыть скрытое содержимое конкретной кнопки, а не всех сразу?

Question

[modestfake]

Создал две идентичные кнопки с одинаковым скрытым содержимым:

<button type="button">Button 1</button>
		<div class="hide_show">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>

		<button type="button">Button 2</button>
		<div class="hide_show">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>

При нажатии кнопки содержимое показывается при помощи jQuery:

$(document).ready(function(){
    $("button").click(function(){
        $(".hide_show").slideToggle("normal");
    });
});

Проблема в том, что при нажатии любой из кнопок открывается содержимое всех блоков, а не только того, что спрятано под конкретной кнопкой.

Пример тут button.agrokontakt.in.ua

Answer 1

[Bhudh]

$("button").click(function(){
    $(this).next().slideToggle("normal");
    $(this).find(".arrow").toggleClass("transform");
});

Comments

[Серж Ткач]

Спасибо!!

Answer 2

[Михаил Горячкин]

В вашем случаи так:

$(document).ready(function(){
    $("button").click(function(){
        var that = $(this), openBlock = that.next();
        openBlock.slideToggle("normal");
    });
});