SharePoint : Expandable/Collapsible Headers Solution for Pages

Background

This solution can be used to replicate native MS Office expandable/collapsible headers which is not available Out-of-the-box in SharePoint.

This technique is very useful in creating Publishing Pages and FAQs.

Code

The simple jQuery below does all the work. You can implement this either by adding a Script Editor on your page or adding it on your Page Layout.

For this wiki we'll just use a Script Editor.

The code targets all the headers on your page [h1 - h6]. SharePoint Headers only uses up to h4.

      <script src=    "//code.jquery.com/jquery-1.11.2.min.js"    ></script>  
      <script type=    "text/javascript"    >  
      $(document).ready(    function    (){  
                 $(      ":header"      ).css(      "line-height"      ,       "0%"      );      
                 $(      ":header"      ).css(      "border-top"      ,       "5px solid transparent"      );      
                 $(      ":header"      ).css(      "border-bottom"      ,       "5px solid transparent"      );      
                 $(      ":header"      ).css(      "border-left"      ,       "5px solid black"      );      
                 $(      ":header"      ).css(      "padding-left"      ,       "5px"      );      
                 $(      ":header"      ).css(      "margin-bottom"      ,       "10px"      );      
                 //Cancel out the title Style      
                 $(      ":header:first"      ).removeAttr(      "style"      );;      
                 $(      ":header"      ).click(      function      (){      
                 $(      this      ).nextUntil(      ":header"      ).toggle();      
                 });      
      });  
      </script>  

Implementation

Edit your SharePoint Page and click Insert then Embed Code:

• Paste the code snippet above. You can point to the local jQuery file in your Script Library instead of using //code.jquery.com

• Now on your Page Content, Type in a sample header and click Format Text. You can choose from Header 1 - Header 4. This is basically just h1 to h4 in HTML terms:

 

As you can see on the image above,  the "What You Need" text has been set to use Heading 2 (disregard the highlighted Heading 3).

There is also some plain text below. All that text below the header will be included in the collapsible content.

Here's how it looks expanded:

Now collapsed

It is also possible to have sub-headers, as seen below on point 2.1

You now have an expandable/collapsible header functionality for your SharePoint pages which is very easy to implement and easy to understand for your end users.

Notes:

Edited the Script to include an arrow prefix on each header.

Headers should now look like this