shutterstock_184473665.jpg

Summit 7 Team Blogs

How to Create Dynamic Accordions in SharePoint Pages

As a developer, I am often challenged with client requirements that involve extending or enhancing SharePoint in terms of branding or aesthetics. Although it requires a steady hand to carefully intertwine custom features with SharePoint's OOTB functionality, this is where the platform can really be made to shine.

What is today's challenge? Enhancing publishing pages with collapsible accordion-like headings. Let's get to it!

A quick google search can yield several means of accomplishing collapsible regions using a combination of jQuery, HTML, and CSS. However, in the context of a SharePoint Publishing Portal, we need to take this a few steps further so that the accordion-like behavior is dynamic and seamlessly integrates with how our content author(s) maintain their pages.

Step One – Setup

  1. Create a test page using  > Add a page
    1. Give your page a name (i.e. TEST) and click Create.
  2. Grab your favorite lorum ipsum generator and add some test content within the Page Content.
  3. Using the Header2 styling, add several headings to your content between paragraphs.

  4. Click Save and you're done with setup! Your page should now look similar to the following:

Step Two – Formulating the jQuery

Now we need to integrate a client-side code (jQuery) solution into the page to perform the expand/collapse functionality on our <h2> headings.

Note: For sake of brevity in this walkthrough, I am not demonstrating the supporting infrastructure for hosting JavaScript and .CSS files within SharePoint. Instead, I'll simply be including these within an Embed Code object on our test page. For more information on this topic, I would recommend Customize your SharePoint site UI by using JavaScript.

To get started, we'll need client-side logic to inspect the DOM elements on the page and collapse content between our headings (<h2>) when the page loads. You'll notice I'm also checking for [index > 0] before collapsing these regions so that the first block of content is expanded by default.

[js]var UI = {
collapseContentHeaders: function () {
$('#DeltaPlaceHolderMain h2').each(function (index, value) {
// Collapses all <h2> blocks except for the first encountered
if (index > 0) {
$(this).toggleClass('expand').nextUntil('h2').slideToggle(100);
}
});
}
}[/js]

 

Next up, we need to bind a .click() event handler to our Page Content headings so that once clicked, these blocks will toggle (expand/collapse). To do this, we'll use the following UI.toggleContentHeaders function:

[js]var UI = {
toggleContentHeaders: function () {
// Toggles the accordion behavior for <h2> regions onClick
$('#DeltaPlaceHolderMain h2').click(function () {
$(this).toggleClass('expand').nextUntil('h2').slideToggle(100);
});
}
}[/js]

Note: For a deeper dive into how the dynamic accordions work, check out the .toggleClass() and .nextUntil jQuery documentation.

Finally, we'll need a means of checking for "Edit Mode" on our publishing pages. This is necessary to ensure that our accordion functionality only executes for end-users and not while our content authors are formatting page contents behind the scenes. To do this, we'll enlist a Utils.checkPageInEditMode function:

[js]var Utils = {
checkPageInEditMode: function () {
var pageEditMode = null;
var wikiPageEditMode = null;

// Edit check for Wiki Pages
if (document.forms[MSOWebPartPageFormName]._wikiPageMode) {
wikiPageEditMode = document.forms[MSOWebPartPageFormName]._wikiPageMode.value;
}
// Edit check for all other pages
if (document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode) {
pageEditMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;
}
// Return the either/or if one of the page types is flagged as in Edit Mode
if (!pageEditMode && !wikiPageEditMode) {
return false;
}
return pageEditMode == "1" || wikiPageEditMode == "Edit";
}
}[/js]

Now that we've got the primary jQuery components figured out, let's integrate them into our test page! To do this we'll need to:

  1. Click > Edit page.
  2. Using the Ribbon in the top-bar navigation, click Embed Code.

  3. Paste in the following code block and click Insert.

[html]<script language="javascript" type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.2.min.js"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function () {
var inEditMode = Utils.checkPageInEditMode();
// Prevent the collapsing of <h2> blocks when in SharePoint's [Edit Mode]
if (!inEditMode) {
UI.collapseContentHeaders();
UI.toggleContentHeaders();
}
});

var UI = {
collapseContentHeaders: function () {
$('#DeltaPlaceHolderMain h2').each(function (index, value) {
// Collapses all <h2> blocks except for the first encountered
if (index > 0) {
$(this).toggleClass('expand').nextUntil('h2').slideToggle(100);
}
});
},
toggleContentHeaders: function () {
// Toggles the accordion behavior for <h2> regions onClick
$('#DeltaPlaceHolderMain h2').click(function () {
$(this).toggleClass('expand').nextUntil('h2').slideToggle(100);
});
}
}

var Utils = {
checkPageInEditMode: function () {
var pageEditMode = null;
var wikiPageEditMode = null;

// Edit check for Wiki Pages
if (document.forms[MSOWebPartPageFormName]._wikiPageMode) {
wikiPageEditMode = document.forms[MSOWebPartPageFormName]._wikiPageMode.value;
}
// Edit check for all other pages
if (document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode) {
pageEditMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;
}
// Return the either/or if one of the page types is flagged as in Edit Mode
if (!pageEditMode && !wikiPageEditMode) {
return false;
}
return pageEditMode == "1" || wikiPageEditMode == "Edit";
}
}
</script>[/html]

Once saved, you'll notice that your headers are now collapsible!

jquery_accordions_without_CSS

Step Three – Styling the Headings with CSS

Now that we've got the dynamic accordions in place, let's brave some CSS to make their function a little more intuitive and aesthetically pleasing for our users. To do this, we'll reference Font Awesome for their icon suite and style our <h2> headings when collapsed and expanded:

 

[html]
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
/*** CSS for collasable headers ***/
#DeltaPlaceHolderMain h2 {
background: #0072C6;
padding: .25em;
border-radius: 2px 2px 2px 2px;
color: #fff;
cursor: pointer;
margin-bottom: .5em;
}
/*** Collapsed h2 ***/
#DeltaPlaceHolderMain h2.expand:before {
font-family: 'FontAwesome';
content: '\f0fe ';
}
/*** Expanded h2 ***/
#DeltaPlaceHolderMain h2:before {
font-family: 'FontAwesome';
content: '\f146 ';
}
</style>
[/html]

All that remains now is to incorporate the CSS styling into our Embed Code container. To do this:

  1. Click > Edit page.
  2. Using the Ribbon in the top-bar navigation, click Embed Code.

  3. Above our existing jQuery code, paste in the above styles code and click Insert.
  4. Click Save to jump out of edit mode and see your latest updates.

completed_dynamic_accordions2


Huzzah! We've now completed the custom solution and have a concise way of organizing pages with a lot of content.


If you have any questions, feel free to comment below and I'll be sure to respond accordion-ly!

Although the bacon ipsum content looks delicious, no livestock were harmed in the writing of this blog.


SHARE THIS STORY | |