Я сделал разворачивание, а сворачивание что-то не получается - как сделать?
$(document).ready(function() {
$(".catalogEntryItem").each(function() {
$(this).on("click",".catalogEntryItemTitle", function() {
$(this).toggleClass("active");
$(this).find("i").toggleClass("arrowDown");
$(this).parent().find(".catalogEntryItemList").slideToggle();
return false;
});
});
});
http://codepen.io/anon/pen/JYVRBy Собственно сабж. Всем спасибо.
$(document).ready(function() {
$(".catalogEntryItem").each(function() {
$(this).on("click",".catalogEntryItemTitle", function() {
$(this).toggleClass("active");
$(this).find("i").toggleClass("arrowDown");
$(this).parent().find(".catalogEntryItemList").slideToggle();
return false;
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="catalogEntryItem"><a href="" class="catalogEntryItemTitle"><i class="arrow"></i><span>asd</span></a>
<div class="catalogEntryItemList" style="display: none;"><a href="">dsa</a><a href="">gedgs</a><a href="">sdgbdsgb</a><a href="">sdvgdsv</a></div>
</div>
<div class="catalogEntryItem"><a href="" class="catalogEntryItemTitle"><i class="arrow"></i><span>asd</span></a>
<div class="catalogEntryItemList" style="display: none;"><a href="">dsa</a><a href="">gedgs</a><a href="">sdgbdsgb</a><a href="">sdvgdsv</a></div>
</div>
<div class="catalogEntryItem"><a href="" class="catalogEntryItemTitle"><i class="arrow"></i><span>asd</span></a>
<div class="catalogEntryItemList" style="display: none;"><a href="">dsa</a><a href="">gedgs</a><a href="">sdgbdsgb</a><a href="">sdvgdsv</a></div>
</div>
<div class="catalogEntryItem"><a href="" class="catalogEntryItemTitle"><i class="arrow"></i><span>asd</span></a>
<div class="catalogEntryItemList" style="display: none;"><a href="">dsa</a><a href="">gedgs</a><a href="">sdgbdsgb</a><a href="">sdvgdsv</a></div>
</div>
<div class="catalogEntryItem"><a href="" class="catalogEntryItemTitle"><i class="arrow"></i><span>asd</span></a>
<div class="catalogEntryItemList" style="display: none;"><a href="">dsa</a><a href="">gedgs</a><a href="">sdgbdsgb</a><a href="">sdvgdsv</a></div>
</div>
Дополнение:
Для тех, кто не знает, аккордеон - это набор сворачиваемых блоков, среди которых одновременно только один (или не более одного) может быть в развёрнутом состоянии.