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