Create collapsible menus on section pages

7 Comments

  • Kyle B
    Community Moderator

    I'm not sure if it's possible to create a collapsible section, but you could limit how many articles are shown as a preview. This is what I have done to my KB: 

    I specified that I wanted to show 3 articles but you can change that. Would this work for you or are you looking for something else?

    0
  • Ifra Saqlain
    Community Moderator

    Hey Nikita,

    you can add custom jQuery code for your query. Follow the given steps below:

    Step 1: Add jQuery library on your doument_head.hbs template.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    Step 2: Copy this code and paste at your script.js file.

    $(document).ready(function(){
    // Pay attention on the class-name. You have your own class name for section title and articles list
    $("ul.article-list, ul.section-list").hide();
    $(".section-content h1").click(function (){
    $("ul.article-list, ul.section-list").toggle();
    });
    });

    Once you have done with this, go to the section page after doing preview and click section title, your article list would be collapse.

    If any issue let me know:)

    Team

     

    0
  • Big Sur

    Hi Diziana,

     

    This is great, thanks so much! Just two questions:

    1. If I have never changed the class names for sections and articles, is it safe to assume they are the same as in your code.

    2. If the answer is No to the above question, where can I find out what those class names are in the Copenhagen theme?

    Otherwise all pretty clear :)

    Thanks again!

    0
  • Big Sur

    Hi Diziana,

    I have managed to add the code and I think it worked, but the collapsible menus just stay like that so I can't uncollapse them to view the articles or if I click on the section, then none of the articles load up on the section page.

    Anything I can do to fix?

    0
  • Ifra Saqlain
    Community Moderator

    Nikita, you are testing on the wrong template, it's for your section page.

    1. Go to your script code and replace it with the previously provided script code.

    $(document).ready(function(){
    // Pay attention on the class-name. You have your own class name for section title and articles list
    $(".section-content ul.article-list, .section-content ul.section-list").hide();
    $(".section-content h1").click(function (){
    $(".section-content ul.article-list, .section-content ul.section-list").toggle();
    });
    });

     2. Go to your section template on preview mode and then test it.

     

    0
  • Big Sur

    Hi Ifra, and thanks for getting back to me!

    I see what you mean, this won't work for us as we don't have sub-section pages. We need this to work on the category page and as I understand this collapses our section pages, which don't have any sections in them.

    Nikita

    0
  • Ifra Saqlain
    Community Moderator

    Okay then, 

    Code for your Category Page accordion, replace your script code for this.

    $(document).ready(function(){
    // Pay attention on the class-name. You have your own class name for section title and articles list
    $(".category-container ul.article-list").hide();
    $(".category-container h2").click(function (){
    $(".category-container ul.article-list").toggle();
    });
    });

     Go to the category_page.hbs.

    Find the title of section.

    {{#each sections}}
    <section class="section">
    <h2 class="section-tree-title">
    <a href="{{url}}">{{name}}</a>. Remove anchor tag from here
    </h2>
    {{#if articles}}
    <ul class="article-list">
    {{#each articles}}
    <li class="article-list-item{{#if promoted}} article-promoted{{/if}}">
    {{#if promoted}}

    After removing the anchor tag.

    {{#each sections}}
    <section class="section">
    <h2 class="section-tree-title">
    {{name}} After Removing anchor tag from here
    </h2>
    {{#if articles}}
    <ul class="article-list">
    {{#each articles}}
    <li class="article-list-item{{#if promoted}} article-promoted{{/if}}">
    {{#if promoted}}

     

    I hope this time your query would be resolve :)

    0

Please sign in to leave a comment.

Powered by Zendesk