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
8 years ago

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!