Forum Discussion

Mach008's avatar
Mach008
Guide
8 years ago

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...
  • VikasB's avatar
    VikasB
    8 years ago

    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&colon;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>

     

VikasB's avatar
VikasB
Boss

Hi Mach008  Not sure but it seems that initially, your script hides all the board titles when you click on category title due to line no 3 inside the ready function and next line(4th line) shows only single board title just next to category title you click.  


It would be easy to find out the issue if you can share the accordion code snippet(HTML code) also. 

Mach008's avatar
Mach008
Guide
8 years ago

Hi VikasB,

Thanks for the reply.

Well, that's all of the script I have. One of the member here in the community, show me this as example, but I can't seem to grasp as to why it is only pulling single board title instead of all.

 

This is html/api section - 

<style>
ul#board_title{display:none;}
</style>

<#assign categories = rest("/categories").categories />
<#list categories.category as category>

<div class="cata_title">
<p id="n_left">${category.title}</p>
</div>
<#list rest(category.@href+"/boards/nested").boards.board as board >

<ul id="board_title">
<li><a href="${board.@view_href}">${board.title}</a></li>
</ul>
</#list>
</#list>

 

Originally, this the script I was using - 

 

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
      acc[i].onclick = function(){
            this.classList.toggle("active");
            var panel = this.nextElementSibling;
           if (panel.style.display === "block") {
           panel.style.display = "none";
           } else {
                panel.style.display = "block";
          }
     }
}
</script>

 

 

Thank you

 

  • VikasB's avatar
    VikasB
    Boss
    8 years ago

    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&colon;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>

     

    • Mach008's avatar
      Mach008
      Guide
      8 years ago

      Wow!

      Thanks a lot VikasB, I will apply this right away.

      Much appreciated!