Tip: Collapsible headers in articles or templates (accordions)

129 コメント

  • Irene

    hi Trapta Singh! We tried to apply the accordion, we have no console errors, but the panel content is not opening, can you help us? thanks

     

    0
  • Trapta Singh
    Community Moderator
    Zendesk Luminary

    Hi @Irene,

    Is it possible for you to share the link of your HC or some way I can see what went wrong so I can guide you accordingly?

    Thanks

    0
  • Mylene

    Hello everyone, could you please advise how I can apply collapses with headers to sections?
    For example, If I click on a section header, it opens the list of the titles of the articles and then again. 
    Thank you for your help!

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Mylene Issartial,

    For which page you want to do this, Home, category or section?

     

    You only need to wrap the section title inside this:

    <div class="accordion">

    </div>


     

    and then wrap all the articles inside the panel:

    <div class="panel">

    </div>




     

     

    CSS and JS code are already there, copy  and paste as it is.

     

    If any confusion feel free to ask :)

    Thanks

     

    0
  • Mylene

    It worked, thank you very much.

    Is there a possibility to have a section and then a subsection to have the country and then a subsection per thematic?

    For example: Category: Country

    Section: Alaska

    Sub section: General and then article

    Sub section: Alaska adventure and then articles

    sub section: Alaska diving and then articles

    A the moment I have the below:

    Thank you in advance

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    @Mylene Issartial, just do te same as you did for the category page:

     

    Add accordion to section title and move out section title from the header-

     

     

    Add panel before the subsections code-

     

     

    Close this panel after the article code at the bottom-

     

     

    Test this and let me know  :)

     

    1
  • Irene

    hi Trapta Singh! https://ayuda.wallapop.com/hc/es-es

    thx in advance

    0
  • Trapta Singh
    Community Moderator
    Zendesk Luminary

    Hi Irene,

    Can you try commenting the code from line no. 219 to 221 in your script.js file? It seems that the same is throwing some error.

    Or you can try putting the according script code above this line of code.

    Let me know how it goes for you.

    Thanks

    0
  • Mylene

    Hello Ifra, thank you very much but not sure I did it correctly:

    This is what I had : 


           

    Then I added the following :

    But it does not work and I miss something. 

    0
  • Kyla Craig

    Hi Zendesk team, 

    I love these accordions, thank you!

    I'm hoping you can help me make them accessible with the keyboard. I've added tabindex=0 to each <div class="accordion">, so they are focusable with the keyboard, but nothing happens when I try to open or close them with the enter key, space bar, etc. They only open and close when clicked with the mouse, but our help center must comply with WCAG 2.1 AA accessibility guidelines, so the accordions must be controllable with the keyboard as well. I believe something has to be edited in the JS, but I'm not knowledgeable enough to figure it out on my own. 

    Here's one of our help center articles that uses accordions: https://community.environicsanalytics.com/hc/en-us/articles/360029443292

    Any advice is appreciated. Thanks!

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Kyla Craig,

     

    There are some changes in the code:

    JS code in script.js file:

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

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

     

    Compare the CSS code:

    .accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
    }
    .active, .accordion:hover {
      background-color: #ccc; 
    }

    .accordion:focus-within{
      background-color:hsl(0deg 0% 97%);
    }


    .panel {
      padding: 0 18px;
      display: none;
      background-color: white;
      overflow: hidden;
    }

    .accordion:after {
      content: '\002B';
      color: #777;
      font-weight: bold;
      float: right;
      margin-left: 5px;
    }

    .active:after {
      content: "\2212";
    }

     

     

    Update HTML Code:

    Updated Code:

    <button class="accordion">Section 1</button>

    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>


    Old Code:

    <div class="accordion">
      <p>Section 1</p>
    </div>
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>


    Note: Use updated code, change div to button tag only.

     

    It will be helpful for you :)

     

    Thanks

     

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Mylene Issartial

    To apply accordion to your subsections on the section page, follow the steps below:

    1). Go to your section_page.hbs file.

    2). Update the subsection title code as given below.

     <button class="accordion"> <span>{{name}}</span></button>


    Only add a button with class-name accordion, do not update anything else.

    Screenshot for the same:

     

     

    Now, add the given code below just after the button that you updated above. This code is for showing articles of subsections on the section page.

    {#if articles}}
            <ul class="article-list panel">
              {{#each articles}}
                <li class="article-list-item {{#if promoted}} article-promoted{{/if}}">
                  {{#if promoted}}
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 12 12" class="icon-star" title="{{t 'promoted'}}">
                      <path fill="currentColor" d="M2.88 11.73c-.19 0-.39-.06-.55-.18a.938.938 0 01-.37-1.01l.8-3L.35 5.57a.938.938 0 01-.3-1.03c.12-.37.45-.63.85-.65L4 3.73 5.12.83c.14-.37.49-.61.88-.61s.74.24.88.6L8 3.73l3.11.17a.946.946 0 01.55 1.68L9.24 7.53l.8 3a.95.95 0 01-1.43 1.04L6 9.88l-2.61 1.69c-.16.1-.34.16-.51.16z"/>
                    </svg>
                  {{/if}}
                  <a href="{{url}}" class="article-list-link">{{title}}</a>
                  {{#if internal}}
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}">
                      <rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
                      <path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
                    </svg>
                  {{/if}}
                </li>
              {{/each}}
            </ul>
          {{else}}
            <i class="section-empty">
              <a href="{{url}}">{{t 'empty'}}</a>
            </i>
          {{/if}}



    Screenshot for the same:

     

     

    Add CSS code to your style.css file.

    .accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
    }
    .active, .accordion:hover {
      background-color: #ccc; 
    }

    .accordion:focus-within{
      background-color:hsl(0deg 0% 97%);
    }


    .panel {
      padding: 0 18px;
      display: none;
      background-color: white;
      overflow: hidden;
    }

    .accordion:after {
      content: '\002B';
      color: #777;
      font-weight: bold;
      float: right;
      margin-left: 5px;
    }

    .active:after {
      content: "\2212";
    }

     

     

    Add script code to your script.js file.

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

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

    Note: You can update your category page accordion tags and CSS and js code as per the above description, your accordion will work on keypress.

     

    Output:

     

     

     

    If any confusion feel free to ask :)

    Thanks

    1
  • Kyla Craig

    Hi Ifra Saqlain,

    Thank you for this! It looks like the accordions are now usable with the keyboard, however they won't open anymore. They display like they're open, but the <div class="panel"> content does not appear. I found this error in the Console: 

    Do you know how I can fix this? 

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Kyla Craig,

    As I explained above, you must use <button  class="accordion">...</button> tag instead of <div class="accordion">.....</div>, otherwise it won't work on keypress. 

     

    If you want to solve your first error, your console has a null error because when your page doesn't has any class-name which you use in your script code then code throws error. You can add condition to check the URL string of the page to remove this error.

     

    Thanks

     

    0
  • Kyla Craig

    Hi Ifra Saqlain

    I'm confused because the page has the class name "panel" (3 times) so I don't know why it's not recognizing it. Are you able to tell me how to add a condition to check the URL string of the page?

    Also, I have changed it to <button class="accordion">, I just can't publish my changes because it's not working correctly. 

    Thanks for your help!

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    @Kyla Craig, that's too simple to make that work.

    The code is working, I tested your theme using the dev tool.

     

     

     

    Can you share your article page code here or to my mail ID? I want to see what did you do?

    0
  • Mylene

    HI Ifra Saqlain, thank you for your help. However, I am not sure how to make it work, not really into coding and learning step by step. Would it be possible to have a quick call?

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    @Mylene Issartial, Sure. 

    0
  • Mylene

    Super, please let me know when you can be available :) I am located in the UTC -5 (EST time zone)

    0
  • Elizabeth Barron

    I am suddenly having issues where tables are cut off in accordions (this was brought to my attention over the weekend). I've tried resizing and have tried adjusting table attributes in style.css but with no results. Any assistance?

    /***** Tables *****/
    .table, .article-body table {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      border-spacing: 0;
      border-style: dashed;
      border-width: 1px;
    }

    @media (min-width: 768px) {
      .table, .article-body table {
        table-layout: auto;
      }
    }

    .table th, .article-body table th
    .table th a, .article-body table th a {
      color: lighten($text_color, 20%);
      font-size: 13px;
      font-weight: 300;
      text-align: left;
      border: dashed 1px #333;
    }

    [dir="rtl"] .table th, [dir="rtl"] .table th a,
    [dir="rtl"] .article-body table th, [dir="rtl"] .article-body table th a {
      text-align: right;
      border: dashed 1px #333;
    }

    .table tr, .article-body table tr {
      border: dashed 1px #333;
      display: block;
      padding: 5px;
    }

    @media (min-width: 768px) {
      .table tr, .article-body table tr {
        display: table-row;
        border: dashed 1px #333
      }
    }

    .table td, .article-body table td {
      display: block;
    }

    @media (min-width: 768px) {
      .table td, .article-body table td {
        display: table-cell;
      }
    }

    @media (min-width: 1024px) {
      .table td, .table th,
      .article-body table td, .article-body table th {
        padding: 20px 30px;
      }
    }

    @media (min-width: 768px) {
      .table td, .table th,
      .article-body table td, .article-body table th {
        padding: 10px 20px;
        height: 60px;
      }
    }
    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    @Elizabeth Barron, you only need to add this style to your table's parent wrapper only.

    Credit: https://www.w3schools.com/css/tryit.asp?filename=trycss_table_responsive

     

     

    Output: A scrollbar will be added to your table.

    0
  • Elizabeth Barron

    Thanks Ifra Saqlain. It's a little bizarre that this is happening all of a sudden as these tables have displayed correctly in the past with no scroll bar. Even when I resize the table, it doesn't resize within the accordion. The scrollbar helps for now, but I still feel like there is a bigger issue preventing them from being resized.

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    @Elizabeth Barron, scrollbar will help you with small (Mobile and Tablet) devices. If I can see your theme I can share my view or solution but you can try decreasing the padding of table cells in CSS. 

    0
  • Elizabeth Barron

    Ifra Saqlain our Guide is not available to the public, but I'm happy to provide you with any code or other information you might need. I've tried adjusting padding of table cells, but it doesn't seem to have an impact. 

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    @Elizabeth Barron, something is wrong in CSS you can remove all CSS and test. I'm attaching a link of responsve table you should see once:

    https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_table_responsive

    0
  • Alexandra Culler

    Hi Ifra Saqlain - thank you so much for the great code! I've implemented it on my site.

    I am wondering if it's possible to set it up so that the first accordion in a series is open? I tried to update my HTML so the first item was of the class "accordion active" but all that did was highlight the header without showing the content within the panel.

    This is the first time we're using this feature on our site, so I am trying to guide users by having the first accordion open so they know to open the other ones.

    Thanks for any guidance you can provide!

    0
  • Jane M Langschied

    Hello,

    I implemented this code as noted above, but the accordion does not open in the published article. 

     

    0
  • Jane M Langschied

    Does this code need updating?

    When I followed the steps, a large number of our articles stopped displaying content. The content was still there when I clicked "edit" on the article, but would not display when published. I deleted the code and it resolved the issue. 

    0
  • Alexandra Culler

    Jane M Langschied - it works for me (see here). Could it be that the code conflicts with something in your CSS or JS files? If you already have something defined as "accordion" or "panel" in your CSS file, that could cause an error if you try to re-define it later, or try to reference it in the JS file

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Max Nason, you can use this accordion source code:  https://codepen.io/hedayethm/pen/pqLWdL

     

    Follow the steps below:

    i). Add these CDNs to your document_head.hbs file.

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

     

    ii). Add code to your article > edit > source code.

    <div id="accordion1" class="panel-group">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 id="h_01HHPZGWSYHQDNDQ35E017Q8XP" class="panel-title">
            <a href="#collapseOne" data-toggle="collapse" data-parent="#accordion1">Collapsible Group Item #1 </a>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
          <div class="panel-body">Panel 1</div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 id="h_01HHPZGWSYY31E3VWPCDY4374R" class="panel-title">
            <a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion1">Collapsible Group Item #2 </a>
          </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
          <div class="panel-body">
            <div class="panel-body">
              <h2 id="h_01HHPZGWSZR1JE5RQGWMTKFMP5">Heading</h2>
              <div id="accordion21" class="panel-group">
                <div class="panel">
                  <a href="#collapseTwoOne" data-toggle="collapse" data-parent="#accordion21">View details 2.1 » </a>
                  <div id="collapseTwoOne" class="panel-collapse collapse">
                    <div class="panel-body">Details 1</div>
                  </div>
                </div>
                <div class="panel ">
                  <a href="#collapseTwoTwo" data-toggle="collapse" data-parent="#accordion21">View details 2.2 » </a>
                  <div id="collapseTwoTwo" class="panel-collapse collapse">
                    <div class="panel-body">Details 2</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 id="h_01HHPZGWSZH2XXEBFW48H9PP7F" class="panel-title">
            <a href="#collapseThree" data-toggle="collapse" data-parent="#accordion1">Collapsible Group Item #3 </a>
          </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
          <div class="panel-body">
            <div id="accordion2" class="panel-group">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 id="h_01HHPZGWSZ1VPCZWKF9WD256T7" class="panel-title">
                    <a href="#collapseThreeOne" data-toggle="collapse" data-parent="#accordion2">Collapsible Group Item #3.1 </a>
                  </h4>
                </div>
                <div id="collapseThreeOne" class="panel-collapse collapse in">
                  <div class="panel-body">Panel 3.1</div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 id="h_01HHPZGWSZMFDH7WB0R59YTRNT" class="panel-title">
                    <a href="#collapseThreeTwo" data-toggle="collapse" data-parent="#accordion2">Collapsible Group Item #3.2 </a>
                  </h4>
                </div>
                <div id="collapseThreeTwo" class="panel-collapse collapse">
                  <div class="panel-body">Panel 3.2</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

     

     

     

    If any issue feel free to ask :)

    Thanks

     

     

     

    0

サインインしてコメントを残してください。

Powered by Zendesk