Create expanding/collapsing sections in an article

Over the years, we've worked up a few different solutions for customers who want to collapse some content by default and then expand it--an accordion structure designed to keep pages looking cleaner so readers can engage with what they are most interested in. Here are a few of the solutions we've come up with, so you can adapt them as you see fit.

Automatically collapse all text between headers of all sizes

Implementation Method: Snippet created in Library > Snippets; snippet mergecode added to relevant articles

This snippet hides any text under every size heading throughout the entire article, which can then be expanded and collapsed using plus/minus toggles:

Setup & Usage

To implement this functionality, create a snippet that handles the logic and styling.

  1. Go to Library > Snippets.
  2. Click the + Create New Snippet button.
  3. Give your snippet a name (such as Collapse). The Merge Code Name will auto-generate from the Snippet Name, though you can also override this to something shorter.
  4. Add a Snippet Description, like: This snippet hides any text under every size heading throughout the entire page, which can then be expanded with a clickable "+" icon.
  5. Click the dropdown next to Snippet Content to open the Code Editor.
  6. Copy the script below and paste it into the Code Editor:
    <script>
         $(function(){
         $('.hg-article-body :header').each(function(){
                  $(this).nextUntil(':header').wrapAll("<div class='collapse'></div>");
              });
         $( ".hg-article-body :header" ).wrap( "<div class='expand'></div>" );
    
    
        $('.expand').next('.collapse').addClass('collapse-indent');;
        $('.expand').find(':header').prepend('<i class="fa fa-plus-circle"></i>');
     
        $('.expand').on('click', function(){
          $(this).find('i').toggleClass('fa-minus-circle').toggleClass('fa-plus-circle');
          $(this).next('.collapse', ".open").slideUp();
          $(this).next('.collapse').not(".open").slideDown();
          $(this).next('.collapse').toggleClass('open');
        });
    });
    </script>
  7. Optional: If you'd like to change the color of the plus/minus toggles, copy the code below and paste it into the same Code Editor below the script in Step #6, replacing the color hex with a color of your choice:
    <style>
    /* Optional style section: adjust color of the background for the toggles by changing the color hex */
    .hg-article-body .expand i {
        color: #800080;
    }
    </style>

    Sample snippet, using the optional styling for changing the color of the toggles

  8. Click Save Changes.

To apply this style to an article, insert the snippet you created above following the steps in Snippets.

Automatically collapse text between headers of specific sizes

Implementation Method: Snippet created in Library > Snippets; snippet mergecode added to relevant articles

This snippet will collapse all text--including smaller headings--within specific headings into accordions, using plus/minus toggles. It automatically applies to all headings of the specified levels:

Note: This script will keep smaller headings' content within the collapsed headings as normal content (no expand/collapse), as seen with Heading 4.1 above.

Setup & Usage

To implement this functionality, create a snippet that handles the logic and styling.

  1. Go to Library > Snippets.
  2. Click the + Create New Snippet button.
  3. Give your snippet a name (such as Collapse). The Merge Code Name will auto-generate from the Snippet Name, though you can also override this to something shorter.
  4. Add a Snippet Description, like: This snippet hides any text under your H3 headings throughout the entire page, which can then be expanded with a clickable "+" icon.
  5. Click the dropdown next to Snippet Content to open the Code Editor.
  6. Copy the script below and paste it into the Code Editor:
    <script>
        $(function(){
            if(!window.collapseHasRun) {
                window.collapseHasRun = true;
                $('.hg-article-body h3').each(function(){
                    $(this).nextUntil('h2, h3').wrapAll("<div class='collapse'></div>");
                });
                $( ".hg-article-body h3" ).wrap( "<div class='expand'></div>" );
                
                $('.expand').next('.collapse').addClass('collapse-indent');
                $('.expand').find(':header').prepend('<i class="fa fa-plus-circle"></i>');
                
                $('.expand').on('click', function(){
                    $(this).find('i').toggleClass('fa-minus-circle').toggleClass('fa-plus-circle');
                    $(this).next('.collapse', ".open").slideUp();
                    $(this).next('.collapse').not(".open").slideDown();
                    $(this).next('.collapse').toggleClass('open');
                });
            }
        });
    </script>
  7. Optional: If you'd like to change the color of the plus/minus toggles, copy the code below and paste it into the same Code Editor below the script in Step #6, replacing the color hex with a color of your choice:
    <style>
    /* Optional style section: adjust color of the background for the toggles by changing the color hex */
    .hg-article-body .expand i {
        color: #800080;
    }
    </style>
    Sample snippet, using the optional styling for changing the color of the toggles
  8. Click Save Changes.

To apply this style to an article, insert the snippet you created above following the steps in Snippets.

Variations

You can adjust this script so that it generates the expand/collapse for a different heading level. To do so, you'll need to update lines 4, 5, and 7 of the script.

Line 4 and line 7: change "h3" to be the heading level you'd like to see the expand/collapse icons at

$('.hg-article-body h3').each(function(){
$( ".hg-article-body h3" ).wrap( "<div class='expand'></div>" );

Line 5: Change the list of headings to include all higher-level headings you use before this one, so that higher-level content isn't hidden (like the h4 content is in the screenshots above), as well as the heading level you've selected for the rest of the script:

$(this).nextUntil('h2, h3').wrapAll("<div class='collapse'></div>");

Here is a sample of what an h5 version of this script looks like:

<script>
    $(function(){
        if(!window.collapseHasRun) {
            window.collapseHasRun = true;
            $('.hg-article-body h5').each(function(){
                $(this).nextUntil('h2, h3, h4, h5').wrapAll("<div class='collapse'></div>");
            });
            $( ".hg-article-body h5" ).wrap( "<div class='expand'></div>" );
            
            $('.expand').next('.collapse').addClass('collapse-indent');
            $('.expand').find(':header').prepend('<i class="fa fa-plus-circle"></i>');
            
            $('.expand').on('click', function(){
                $(this).find('i').toggleClass('fa-minus-circle').toggleClass('fa-plus-circle');
                $(this).next('.collapse', ".open").slideUp();
                $(this).next('.collapse').not(".open").slideDown();
                $(this).next('.collapse').toggleClass('open');
            });
        }
    });
</script>

Collapse/expand any chunk of text with a Read More/Read Less link

Implementation Method: Two snippets created in Library > Snippets to begin and end the collapsed section; Custom HTML added to Settings > Style to style those; snippet mergecodes added to relevant articles

The previous chunks of code all automatically collapse chunks of text. If you'd rather be able to control exactly which sections of text are expanded and collapsed, this code will work better for you.

Note: this is the set of snippets used just below.

Here, we use it with the same plus and minus signs as before, but with a Read More/Read Less text:


Setup & Usage

To implement this functionality, create two snippets to handle the styling and expand/collapse logic and edit Custom HTML in Style > Settings to handle the rest of the logic.

To apply this style to an article, insert the beginShowHideSection snippet before the text you want to be collapsed, and the endShowHideSection snippet where you want the collapsing section to end using the steps in Snippets.

Sample usage of these snippets

Variations

You can adjust the "Read More" and "Read Less" text by updating the text used in the script added to Settings > Style. Here, we replace them with "Expand" and "Collapse"

<script>
$(function(){
    $('.toggle').each(function(){
        $(this).prev().append('<a href="javascript:void(0)" class="toggleLink">Expand <span class="fa fa-plus-circle"></span></a>');
    });
      $('.toggleLink').click(function(){
          if($(this).hasClass('toggle-open') == false){
            $(this).html('Collapse <span class="fa fa-minus-circle"></span>').addClass('toggle-open');
              $(this).parent().next('.toggle').show();
        }else{
            $(this).html('Expand <span class="fa fa-plus-circle"></span>').removeClass('toggle-open');
              $(this).parent().next('.toggle').hide();
        }
    });
});
</script> 

You can change the plus and minus icons, as well. Here, we change them to a right arrow and an up arrow:

<script>
$(function(){
    $('.toggle').each(function(){
        $(this).prev().append('<a href="javascript:void(0)" class="toggleLink">Read More <span class="fa fa-arrow-right"></span></a>');
    });
      $('.toggleLink').click(function(){
          if($(this).hasClass('toggle-open') == false){
            $(this).html('Read Less <span class="fa fa-arrow-up"></span>').addClass('toggle-open');
              $(this).parent().next('.toggle').show();
        }else{
            $(this).html('Read More <span class="fa fa-arrow-right"></span>').removeClass('toggle-open');
              $(this).parent().next('.toggle').hide();
        }
    });
});
</script> 

These are using KnowledgeOwl's FontAwesome icon offerings. You can upload your own icons for this purpose or use other FontAwesome icons.

Use Case

Accordion-style text interaction often seems like a great way to avoid overwhelming your readers. However, we like the guidelines provided by Nielsen-Norman Group: if you are hiding content that would effectively answer your readers' questions, it's not a wise move. User experience research shows that most users prefer to scroll over clicking, which requires more interaction. (The exception to this is, of course, mobile-only or mobile-dominant interactions.) If you're going to implement accordion-style collapses, it's a great time to revisit your internal style guide to set good guidance for when and how they should be used.