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 reason it only shows the 'first' board and not the subsequent ones.

 

This is the script I am running atm - 

<@liaAddScript>
(function($){
$(document).ready(function(){
$('category.title').click(function(e){
e.preventDefault();
$("Ul#board.title").hide('fast');
$(this).next().not(':animated').slideToggle();
});
});
})(LITHIUM.jQuery);
</@liaAddScript>

 

This is a screen shot of the issue I am seeing 

 

Can someone direct to as to 'why' this happening?

I am currently using apiv1 for the build.

 

Thank you

  • 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>

     

4 Replies

Sort By
  • 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!