Как показывать элемент только в данном блоке?

Question

[Andrey_Smeet]

Есть такая конструкция:

<ul>
<li>Пункт <div class="hide">Это скрыто</div></li>
<li>Пункт <div class="hide">Это скрыто</div></li>
<li>Пункт <div class="hide">Это скрыто</div></li>
</ul>

$('ul li').click(function () {
		$('.hide').slideToggle(300);
		$(this).toggleClass("hide-open");
});

При нажатии на один пункт — открываются все. Как это исправить?

Answer 1

[Shakir Darion]

использовать $(this).children() открыть один элемент

$('ul li').click(function () {
    $(this).children().slideToggle(300);
    $(this).toggleClass("hide-open");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Пункт <div class="hide">Это скрыто</div></li>
<li>Пункт <div class="hide">Это скрыто</div></li>
<li>Пункт <div class="hide">Это скрыто</div></li>
</ul>