Monthly Archives: August 2018

Accordion menu for SharePoint modern pages

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

Accordion

and the accordion menu expands to more text details.

Accordion1

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">

$(document).ready(function(){

$(".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();
});
});

</script>

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.

Advertisements