Accordion menu for SharePoint modern pages

The goal of the article is to create something like this:


and the accordion menu expands to more text details.


To accomplish this, I have used the React script editor webpart that I found on GitHub combining with some good old jquery.

  • Follow the instructions to git clone and install the script editor webpart from GitHub.
  • Make sure to change the default setting to the following in the ScriptEditorWebPart.manifest.json file before deploying the app.
"requiresCustomScript": false
  • After the webpart is added to the site, add the app to the required page and insert the following text in the webpart:

<script src="Refer-Jquery-path/jquery-1.11.2.min.js"></script>
<script type="text/javascript">


$(".ControlZone-control :header").css("line-height", "7%");
$(".ControlZone-control :header").css("border-top", "8px solid transparent");
$(".ControlZone-control :header").css("border-bottom", "8px solid transparent");
$(".ControlZone-control :header").css("border-left", "10px solid black");
$(".ControlZone-control :header").css("padding-left", "13px");
$(".ControlZone-control :header").css("margin-bottom", "30px");
$(".ControlZone-control :header").css("cursor", "pointer");
$(".CanvasSection-xl12 .ControlZone-control .cke_editable p").css("display", "none");
$(".CanvasSection-xl12 .ControlZone-control .cke_editable p").css("margin-bottom", "30px");

$(".ControlZone-control :header").click(function(){
$(this).nextUntil(".ControlZone-control :header").toggle();


You can also customize it further to have images or videos in each menu item.

However, you will have to add them as separate image webpart below the text webpart and tweak the jquery to combine the accordion effect on both the text and image webparts.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s