Create expanding/collapsing sections in an article

Implementation Method: Snippet created in Snippets; snippet merge code added to relevant articles

This snippet will collapse all text--including smaller headings--within specific headings into accordions, using plus/minus toggles. Most commonly, authors use this to collapse all h2s, h3s, or h4s, for example.

It automatically applies to all headings of the specified levels. For example, here, it's set to collapse all h3s:

Setup & usage

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

1. In the lefthand navigation, go to Snippets. The Snippets page opens.
2. Select + Create New Snippet to create a new snippet. If you're unfamiliar with creating snippets, refer to Create a snippet for more detailed instructions.
3. Enter a Snippet 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. Enter a Snippet Description, like: This snippet hides any text under H3 headings throughout the entire page, which can then be expanded with a clickable "+" icon.
5. Select the Snippet Content dropdown and select 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. In the righthand menu, check the Visibility box to Hide from PDFs. PDFs don't support expanding/collapsing content in this way. If you don't check this box, the content will be collapsed and unable to be expanded!
   
8. 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. Replace the color hex in row 4 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>

9. Select Create to create your snippet.

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

To apply this snippet to all articles:

1. Copy the snippet's Merge Code Value.
2. Go to Customize > Style (HTML & CSS).
3. In the Customize HTML, CSS, and JS section, select Custom HTML.
4. In the Select HTML section to edit dropdown, select Article.
5. Paste the snippet merge code in anywhere in this template. When in doubt, put it at the bottom.
6. Save your changes.

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

This approach can be a bit heavy-handed, but since we've had requests for it, we're providing details.

Implementation Method: Snippet created in Snippets; snippet merge code 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 and usage

To create this setup, create a snippet that handles the logic and styling:

1. In the lefthand navigation, go to Snippets. The Snippets page opens.
2. Select + Create New Snippet to create a new snippet. If you're unfamiliar with creating snippets, refer to Create a snippet for more detailed instructions.
3. Enter a Snippet 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. Enter 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. Select the Snippet Content dropdown and select 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. In the righthand menu, check the Visibility box to Hide from PDFs. PDFs don't support expanding/collapsing content in this way. If you don't check this box, the content will be collapsed and unable to be expanded!
   
8. 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 in row 4 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>

9. Select Create to create your snippet.

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

To apply this snippet to all articles:

1. Copy the snippet's Merge Code Value.
2. Go to Customize > Style (HTML & CSS).
3. In the Customize HTML, CSS, and JS section, select Custom HTML.
4. In the Select HTML section to edit dropdown, select Article.
5. Paste the snippet merge code in anywhere in this template. When in doubt, put it at the bottom.
6. Save your changes.

Implementation Method: Two snippets created in Snippets to begin and end the collapsed section; Custom HTML added to Customize > Style to style those; snippet merge codes added to relevant article.

This code will work when the Begin Snippet is used on a blank line or in some type of regular paragraph text. If you'd like an expand/collapse to appear after a header, refer to the alternate version for headers below.

Here, we use it with Read More (+) and Read Less (-):

Setup and usage

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

Create the begin section snippet

Since these sections can go anywhere, we first need to create a snippet to define where the expand/collapse section should begin:

1. In the lefthand navigation, go to Snippets. The Snippets page opens.

2. Select + Create New Snippet to create a new snippet. If you're unfamiliar with creating snippets, refer to Create a snippet for more detailed instructions.
3. Enter a Snippet Name, such as Begin Show/Hide Section. The Merge Code Name will auto-generate from the Snippet Name, though you can also override this to something shorter.
4. Enter a Snippet Description, like: Put this snippet before a section of text you want to hide under a "read more". Note: you'll need to place the separate snippet "End Show/Hide" at the end of the section of text in order to have this snippet work correctly..
5. Select the Snippet Content dropdown and select Code Editor:
6. Copy the script below and paste it into the Code Editor:

   <div class="toggle" style="display: none;">
   

7. In the righthand menu, check the Visibility box to Hide from PDFs. PDFs don't support expanding/collapsing content in this way. If you don't check this box, the content will be collapsed and unable to be expanded!
   
8. Optional: If you'd like to change the color of the text for Read More/Read Less and the plus/minus toggles--or add a pointing hand as the mouse pointer when someone hovers over these links--copy the code below and paste it into the same Code Editor below the script in Step #6. Replace the color hex in row 4 with a color of your choice.

   <style>
     /* Optional style section to change the color of the Read more/Read Less link */
     .hg-minimalist-theme a.toggleLink:not(.btn) {
         color: #1f9baa;
     }
     /* Change mouse to pointing hand on-hover */
     .hg-minimalist-theme a.toggleLink:not(.btn):hover {
         cursor:pointer;
     }
   </style>
   
   

9. Select Create to create your snippet.

Create the end section snippet

We also need to create a snippet to define where the expand/collapse section should end:

1. Create another new snippet.
2. Enter a Snippet Name, such as End Show/Hide Section. The Merge Code Name will auto-generate from the Snippet Name, though you can also override this to something shorter.
3. Enter a Snippet Description, like: Put this snippet at the end of a section you want to hide under a "read more". Note: you'll need to place the separate "BeginShowHide" snippet at the begin of the section you want to hide under a "read more" in order for this snippet to work correctly.
4. Select the Snippet Content dropdown and select Code Editor:
5. Copy the script below and paste it into the Code Editor:

   </div>

6. In the righthand menu, check the Visibility box to Hide from PDFs. PDFs don't support expanding/collapsing content in this way. If you don't check this box, the content will be collapsed and unable to be expanded!
7. Select Create to create your snippet.

Add the script to your Custom HTML

With your snippets created, added a script to your knowledge base to handle the expanding and collapsing actions:

1. Go to Customize > Style (Custom HTML & CSS). The Style Settings page opens.
2. In the Customize HTML, CSS, and JS section, select Custom HTML.
3. In the Select HTML section to edit dropdown, select Article.
4. Copy the code below and paste it into the bottom of the Custom HTML editor:

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

5. Be sure to Save your changes.

Use the snippets

To apply this style to an article:

1. Insert the beginShowHideSection snippet where you want the Read More link to display, either at the end of a line or on an empty line.
2. Insert the endShowHideSection snippet where you want the collapsing section to end.

For the screenshots above, here's how we formatted that:

Under the External website embed section, select Add domain and enter your full website or app domain. {{snippet.beginShowHideSection}}

1. Include the domain's protocol (http:// or https://).
2. If you don't add a port number, the embed will use default port 443 for an https: domain and port 80 for an http: domain.
3. To allow the chatbot to use a different port number, add a port number at the end of the domain using a colon followed by the port number, for example: https://mydomain.com:3000. The port must match exactly the port you wish to use.
4. Add multiple domains or use the * wildcard (such as for multiple subdomains on the same domain, for example: https://*.mydomain.com).

{{snippet.endShowHideSection}}

If you're unfamiliar with adding snippets to content, follow the instructions in Add snippets in content.

Variations

Change the "Read More" and "Read Less" text to labels you like better. To do so:

1. Update rows 4 and 11 with the text you want instead of "Read More."
2. Update row 8 with the text you want instead of "Read Less".

For example, this code replaces them with "Expand" and "Collapse":

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

Change the plus and minus icons to different icons. To do so:

1. Update rows 4 and 11 with the HTML code for the icon you'd like to use instead of the plus (+).
2. Update row 8 with the HTML code for the icon you'd like to use instead of the minus (-).

For example, this code changes the plus a right arrow and the minus to an up arrow:

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

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

This code works much like the Read More/Read Less code above, except it can be used to place a + or - on the same line as a header:

Setup and usage

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

Create the begin section snippet

Since these sections can go anywhere, we first need to create a snippet to define where the expand/collapse section should begin:

1. In the lefthand navigation, go to Snippets. The Snippets page opens.
2. Select + Create New Snippet to create a new snippet. If you're unfamiliar with creating snippets, refer to Create a snippet for more detailed instructions.
3. Enter a Snippet Name, such as Begin Show/Hide Section. The Merge Code Name will auto-generate from the Snippet Name, though you can also override this to something shorter.
4. Enter a Snippet Description, like: Put this snippet before a section of text you want to hide with a "+" expanding section. Note: you'll need to place the separate snippet "End Show/Hide" at the end of the section of text in order to have this snippet work correctly..
5. Select the Snippet Content dropdown and select Code Editor:
6. Copy the script below and paste it into the Code Editor:

   <div class="toggle">
   

7. In the righthand menu, check the Visibility box to Hide from PDFs. PDFs don't support expanding/collapsing content in this way. If you don't check this box, the content will be collapsed and unable to be expanded!
8. Select Create to create your snippet.

Create the end section snippet

We also need to create a snippet to define where the expand/collapse section should end:

1. Create another new snippet.
2. Enter a Snippet Name, such as End Show/Hide Section. The Merge Code Name will auto-generate from the Snippet Name, though you can also override this to something shorter.
3. Enter a Snippet Description, like: Put this snippet at the end of a section you want to hide with a "+" expanding section. Note: you'll need to place the separate "BeginShowHide" snippet at the beginning of the section you want to be expanded/collapsed for this snippet to work correctly.
4. Select the Snippet Content dropdown and select Code Editor:
5. Copy the script below and paste it into the Code Editor:

   </div>

6. In the righthand menu, check the Visibility box to Hide from PDFs. PDFs don't support expanding/collapsing content in this way. If you don't check this box, the content will be collapsed and unable to be expanded!
7. Select Create to create your snippet.

Add the script to your Custom HTML

With your snippets created, added a script to your knowledge base to handle the expanding and collapsing actions:

1. Go to Customize > Style (Custom HTML & CSS). The Style Settings page opens.
2. In the Customize HTML, CSS, and JS section, select Custom HTML.
3. In the Select HTML section to edit dropdown, select Article.
4. Paste this script into the bottom of the Custom HTML editor:

   <script>
   //Expand/collapse functionality for use with Begin Show/Hide and End Show/Hide snippets
   $(function(){
       $('.toggle').each(function(){
         var $this = $(this);
         $this.children().addClass('toggleItem');
         $this.find(':eq(1)').removeClass('toggleItem').addClass('toggleLink').append('<a href="javascript:void(0)"> <i class="fa fa-plus-circle"></i></a>');
         $this.find('.toggleItem').hide();
         $this.find('.toggleLink').click(function () {
             if($(this).hasClass('toggle-open') == false){
               $(this).addClass('toggle-open').find('.fa').removeClass('fa-plus-circle').addClass('fa-minus-circle');
           }else{
               $(this).removeClass('toggle-open').find('.fa').addClass('fa-plus-circle').removeClass('fa-minus-circle');
           }  
             $(this).parent().find('.toggleItem').toggle();
         });
       });
   });
   </script> 

5. Be sure to Save your changes.

Use the snippets

To apply this style to an article:

1. Insert the beginShowHideSection snippet on the line before the header whose content you'd like to collapse.
2. Insert the endShowHideSection snippet at the end of the line where you want the collapsing section to end.

For the screenshots above, here's how we formatted that:

{{snippet.beginShowHideSection}}

Installation instructions

Under the External website embed section, select Add domain and enter your full website or app domain. Include the domain's protocol (http:// or https://).

1. If you don't add a port number, the embed will use default port 443 for an https: domain and port 80 for an http: domain.
2. To allow the chatbot to use a different port number, add a port number at the end of the domain using a colon followed by the port number, for example: https://mydomain.com:3000. The port must match exactly the port you wish to use.
3. Add multiple domains or use the * wildcard (such as for multiple subdomains on the same domain, for example: https://*.mydomain.com).

{{snippet.endShowHideSection}}

Start using your embed

If you're unfamiliar with adding snippets to content, follow the instructions in Add snippets in content.