How to create an accordion Widget or Collapsible panel with Bootstrap in SharePoint Online

Hi folks, today, in this SharePoint Online branding tutorial, we will discuss Bootstrap Accordion Example in SharePoint Online.

Here we will see, how to create an accordion Widget or Collapsible panel with Bootstrap in SharePoint Online or SharePoint 2013/2016.

Table of Contents

Bootstrap accordion in SharePoint

By using the Bootstrap accordion in SharePoint, we can show hide content. Bootstrap accordion allows us to show only one collapsed item at the same time.

We will learn how to create accordion menus and widgets using Bootstrap, which is widely used on websites to manage a large amount of content and navigation, lists.

With the Bootstrap collapse plugin, you can create either accordion or a simple collapsible panel without writing any JavaScript code.

In today’s example, we will create a basic HTML page using Bootstrap library, CSS and JS files and will add this to our SharePoint page.

You can see some Bootstrap accordion examples.

Prerequisites to Create Bootstrap Accordion in SharePoint

In the below html file make sure to add below 3 major references as discussed above in <Head> section.

<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>

Other important css classes used in the file are-

panel-group– Used to group many panels together. This removes the bottom margin below each panel.
panel– Creates a bordered box with some padding around its content.
panel-heading– Creates a panel header (light background color), by default this class has light grey background color but in below example have overridden this class and changed color as light green. Please refer <style> section in below code for the same.

.panel-heading
 {
 background-color: #eaf527!important;
 }

panel-title– Used inside a .panel-heading to adjust the styling of the text (removes margins and adds a font-size of 16px)
collapse– Indicates collapsible content – which can be hidden or shown on demand
collapse in– Show the collapsible content by default.
Other than these classes I have used inline CSS to make look and feel, formatted contents for the tabbed div’s.

You can refer to any custom CSS file for your requirement.

Create an accordion Widget or Collapsible panel with Bootstrap in SharePoint

Below is the full code to create an accordion Widget or Collapsible panel with Bootstrap in SharePoint.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example
{ margin: 20px;
}
.panel-heading
{
background-color: #eaf527!important;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><p class="yellow-button">CSOM</p></a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div >
<table><tr>
What is Csom in SharePoint?<br>
The client-side object model (CSOM) provides client-side applications with access to a subset of the SharePoint Foundation server object model, including core objects such as site collections, sites, lists, and list items.
Of the three principal approaches to client-side data access, using the CSOM APIs is the only approach that provides the kind of hierarchical, strongly-typed representation of SharePoint objects, such as sites and Webs, that compares to server-side development. The CSOM is the only approach for any client-side data access scenarios beyond list queries. The CSOM allows you to query SharePoint lists by creating CAML queries. This is the most efficient way to query lists, although it requires that developers revert to creating CAML queries. Specific cases where you should favor the use of the CSOM include the following:
You need to perform advanced list operations, such as complicated joins or paging. You can also perform joins through REST requests, although this is subject to various limitations.
You need to manipulate SharePoint objects, such as sites or Webs.
You need client-side access to other areas of SharePoint functionality, such as security.
</tr></table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><p class="red-button">JavaScript and jQuery</p></a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" >
<div >
<table>
<tr>
The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing documents: "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
JavaScript is designed on a simple object-based paradigm. An object is a collection of properties, and a property is an association between a name (or key) and a value. A property's value can be a function, in which case the property is known as a method.
</tr></table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><p class="blue-button">JSOM</p></a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div >
<table><tr>
SharePoint 2013 Client Object Model is a set of libraries and classes with which you can consume SharePoint data through a specific object model that is a subset of the SharePoint Server Object Model. ... JSOM or JavaScript Object Model is a set of .js files built for ECMAScript-enabled platforms.
</tr></table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><p class="green-button">REST API</p></a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div >
<table><tr>
This means that developers can perform Create, Read, Update, and Delete (CRUD) operations from their SharePoint Add-ins, solutions, and client applications, using REST web technologies and standard Open Data Protocol (OData) syntax.
You can perform basic create, read, update, and delete (CRUD) operations by using the Representational State Transfer (REST) interface provided by SharePoint.
The REST interface exposes all the SharePoint entities and operations that are available in the other SharePoint client APIs.
One advantage of using REST is that you don't have to add references to any SharePoint libraries or client assemblies. Instead, you make HTTP requests to the appropriate endpoints to retrieve or update SharePoint entities, such as webs, lists, and list items.
</tr></table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

You can refer this HTML file into the content editor’s path URL. So that any modification would be easy.

Please follow the below steps to add a web part into SharePoint page.

Edit the page and then click on Add a web part and then choose Content Editor web part from Media and Content web part categories like below:

sharepoint online branding bootstrap accordion

Then Edit the web part and in the web part properties set the link file like below:

Page URL- /sites/Bhawana/SiteAssets/SitePages/Accordion.html

sharepoint online branding bootstrap accordion tabs SharePoint online

Also, make sure to change the Chrome Type to None in the web part properties.

Bootstrap Accordion Example in SharePoint Online (Final Output)

Once you save above changes in the content editor web part property and save the page, you can see below the output of Bootstrap Accordion.

sharepoint online branding bootstrap accordion collapse — SharePoint online branding bootstrap accordion collapse

You may like following Bootstrap SharePoint tutorials:

I hope this article is helpful to you to learn how to use Bootstrap Accordion in SharePoint Online! Kindly let me know if you have any queries and concerns.

Bhawana Rathore

Hello Everyone!! I am Bhawana a SharePoint MVP and having about 10+ years of SharePoint experience as well as in .Net technologies. I have worked in all the versions of SharePoint from wss to Office 365. I have good exposure in Customization and Migration using Nintex, Metalogix tools. Now exploring more in SharePoint 2016 🙂 Hope here I can contribute and share my knowledge to the fullest. As I believe “There is no wealth like knowledge and no poverty like ignorance”