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.


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="//"></script>
<script type="text/javascript">
 $(":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


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 //
  • 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.


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

Headers should now look like this