accordion display (script) only showing first board title
Hi everyone, I am trying to build a simple accordion menu for a community but getting into a road block. Script works as it is intended with showing and hiding the board titles but for some reas...
Hi Mach008 You should try this functionality
HTML
<h1>Accordion</h1>
<p class="description">
You could simply toggle the .show class (if display: block is uncommented in the CSS) in JavaScript, but you'll lose the animation.
</p>
<ul class="accordion">
<#assign categories = rest("/categories").categories />
<#list categories.category as category>
<li>
<a class="toggle" href="javascript:void(0);">${category.title}</a>
<ul class="inner" style="display:none">
<#list rest(category.@href+"/boards/nested").boards.board as board >
<li>${board.title}</li>
</#list>
</ul>
</li>
</#list>
</ul>Script
<@liaAddScript>
(function($) {
$('.toggle').click(function(e) {
e.preventDefault();
var $this = $(this);
if ($this.next().hasClass('show')) {
$this.next().removeClass('show');
$this.next().slideUp(350);
} else {
$this.parent().parent().find('li .inner').removeClass('show');
$this.parent().parent().find('li .inner').slideUp(350);
$this.next().toggleClass('show');
$this.next().slideToggle(350);
}
});
})(LITHIUM.jQuery);
</@liaAddScript>
