How to Add a Collapsible Section

Issue/Question

How do I add a Collapsible section to an article? 

Environment

Jacket Connect Article Editor 

Cause

I would like to condense my article.

Resolution

Adding a Collapsible Section to your Article is a great way to Condense Information and can help make an article easier to read and navigate.

A couple of articles that use a collapsible section are: 


How to Add a Collapsible Section: 

  1. To start with adding one to your Article, you will want to type out the Title and the Text that'll be found within the collapsible section
    • To Help The Title of the Collapsible stand out in the Article, it is helpful to:
      • Change the formatting to Header 4
      • Add the + sign before it 
    • To help make the end of the collapsible easier to find within the "Source" Editor: 
      • Type out where you'd like the collapsible section to end
         
  2. Then Click into the Source editor, this will allow you to edit a simplified version of HTML code
     
  3. If you add the Highlighted text within the image below, it will enable the Collapsible within your Article
    Using Ctrl+F can help you find the title within the Source editor faster
     
    1. <hr />
      • Will Add Lines To Help Make the Collapsible Section Stand out.
      • There is one before the Collapsible Section and after to help it stand out more within the Article.  
    2. <details> and </details>
      • Is required for the Collapsible Section to Work. 
        1. <details> is added to the Start of the Collapsible,
        2. </details> will replace the end text you typed out earlier. 
    3. <summary> and </summary>
      • Is required for the Title of the Collapsible to remain there, otherwise it'll join the Collapsible text.
        1. <summary> is added right after <details> and the text located after it will be the Title of the Collapsible Section.
        2. </summary> is added right after the Title.
    <hr />
<details><summary><h4>+ Example Title</h4>
</summary>

<p>Example Text found within Collapsible</p>

</details>

<hr />
  4. Click out of Source after adding the Highlighted text above, and check to see if it is working.
     
  5. If it is working within the Default Article Editing Interface, then Save as Draft at the bottom and check the revision before Updating it to your Public Facing Article.
    This will help make sure that it was properly applied and not blocked by any TDX filter.
     

Below is an Example of what a Collapsible Section looks like: 

+ Example Title

Example Text found within the Collapsible Section

 

Print Article