How to Create a Basic Accordion SharePoint Hosted Add-in

This post was most recently updated on July 31st, 2024

In this article, we are going to make a Basic Accordion SharePoint Hosted Add-in, built with HTML, CSS and jQuery. These type of add-ins are mostly used in FAQ’s where we have Question and Answers.

Before start on an Accordion I request to go through the other SharePoint Add-in articles in this series to get more information. So it gives you basic idea about SharePoint add-in.

So we assume that you have reasonable knowledge of SharePoint Hosted Add-in, HTML, CSS and jQuery. We will create a simple Basic Accordion SharePoint app with Custom App List. We will show Accordion content from Accordion Custom list.

Go to Basic Accordion Add-in Project
Go to Create an Accordion List
Go to Create a Style file
Go to Create a Basic Accordion.aspx Page

You might also like: How to add and read SharePoint Hosted custom Add-In Properties

Create Basic Accordion Add-in Project

To create a Basic Accordion Add-in please read How to create Hello World SharePoint Hosted Add-in and follow given instruction to create a basic Add-in.

So Next is

Create an Accordion List

Go to Accordion App Solution Explorer and Right Click on App Solution , Navigate to Add option and then Click On New Item.
Go to Office/SharePoint > List, Create a New Custom List and Click on Add.
In SharePoint List Wizard settings choose Custom List option and Click on Finish. If you want to use existing list template you can go with existing list template setting options. In this scenario I choose Custom List option.
Under Columns Tab create Title (default column) and Description (available column ) column with Single Line of Text and Multi lines of Text column type, Mark both column required. You can also check the structure of Custom list on Right Hand side.

You can remove column Clicking on Star icon from list. The list also provide some pre-defined column.

Create a Style File

I created style and script for Accordion App and added app.css also I created new folder for script and added app.js.

To Create a Styles folder, Go to Accordion App Solution Explorer and Right Click on App Solution , Navigate to Add option and Click On New Folder.
To Create custom style file within styles folder, Go to Accordion App Solution Explorer >Styles and Right Click on styles, Navigate to Add option and Click On New Item. Select Web option and click on Style Sheet item and it will crate .css file under Styles.

Create a Basic Accordion.aspx Page

I created new basic Page in Add-in place of existing Default page.You can set Basic Accordion.aspx Page as a Start Page of App from AppMainfest file.

To Create a Page in SharePoint add-in Go to Accordion App Solution Explorer and Right Click on Pages folder, Navigate to Add option and Click On New Item.
Go to Office/SharePoint > Page, Create a New Page and Click on Add.

Add your script and style in PageHead placeholder and add given HTML in PlaceHolderMain Area placeholder.

Basic Accordion Page

I’ve used comments to organized code. Add below snippet code in your respective files and then deploy and install the app.

Note: Set permission Read against scope Web in AppMainfest file.For more information about add-in permissions, please see the Add-in permissions

The CSS Styling

/*REST Style START*/
html, body, div, h3 {
 margin: 0;
 padding: 0;
 border: 0;
 vertical-align: baseline;
 font-size: 100%;
}
body {
 line-height: 1;
 background-color: #fff;
 color: #000;
}
/*REST Style END*/
/*Accordion Wrapper Style*/
.accordion-Wrapper {
 font-family: "Segoe UI Light","Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
 font-size: 16px;
 margin: 14px 15px 0;
 font-weight: normal;
}
/*Accordion Items Style*/
.accordion-Wrapper .accordion-Items {
 margin: 50px 0 15px;
}
/*Accordion Headers Style*/
.accordion-Wrapper .accordion-Header {
 cursor:pointer;
 line-height: 1.3;
 color: #666;
 background-color:#d8d8d8;
 font-size: 18px;
 font-weight: 400;
 padding: 12px 10px;
}
.accordion-Wrapper .accordion-Header:hover {
 color: #000!important;
 background-color: #f1f1f1;
}
.accordion-Wrapper .accordion-Header .Expand {
 color: #000;
 background-color: #f1f1f1;
}
/*Accordion Contents Style*/
.accordion-Wrapper .accordion-Content {
 padding: 0px 12px;
 display:none;
 font-size: 16px;
border: 1px solid #ccc;
 line-height: 1.5
}
/*ClearFix Style*/
.clearFix {
 clear: both;
}

/*REST Style START*/

html, body, div, h3 {

margin: 0;

padding: 0;

border: 0;

vertical-align: baseline;

font-size: 100%;

}

body {

line-height: 1;

background-color: #fff;

color: #000;

}

/*REST Style END*/

/*Accordion Wrapper Style*/

.accordion-Wrapper {

font-family: "Segoe UI Light","Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;

font-size: 16px;

margin: 14px 15px 0;

font-weight: normal;

}

/*Accordion Items Style*/

.accordion-Wrapper .accordion-Items {

margin: 50px 0 15px;

}

/*Accordion Headers Style*/

.accordion-Wrapper .accordion-Header {

cursor:pointer;

line-height: 1.3;

color: #666;

background-color:#d8d8d8;

font-size: 18px;

font-weight: 400;

padding: 12px 10px;

}

.accordion-Wrapper .accordion-Header:hover {

color: #000!important;

background-color: #f1f1f1;

}

.accordion-Wrapper .accordion-Header .Expand {

color: #000;

background-color: #f1f1f1;

}

/*Accordion Contents Style*/

.accordion-Wrapper .accordion-Content {

padding: 0px 12px;

display:none;

font-size: 16px;

border: 1px solid #ccc;

line-height: 1.5

}

/*ClearFix Style*/

.clearFix {

clear: both;

}

The jQuery Functionality

var appweburl; //Getting App web url itself only
$(document).ready(function () {
 //Get the decoded App Web URL
 appweburl = getQueryStringParameter("SPAppWebUrl");
 //Call AccordionListData function
 getAccordionListData();
 //Accordion Exapnd/Collapse on Header Click
 $('.accordion-Items .accordion-Header').on('click', function (e) {
 e.preventDefault();
 if ($(this).hasClass('Expand')) {
 //Slide Up Next accordion content
 $(this).next().slideUp();
 $(this).removeClass('Expand').addClass('Collapse');
 } else {
 //Slide Up Header Who have Expand Class
 $('.Expand').removeClass('Expand').addClass('Collapse').next().slideUp();
 //Slide Up Next accordion content
 $(this).next().slideDown();
 $(this).addClass('Expand').removeClass('Collapse');
 }
 });
});
function getAccordionListData() {
 var listName = "Accordion List"; //Pass List Name here
 //Make A Rest API Call to fetch data from created custom sharepoint add-in list
 $.ajax({
 url: appweburl + "/_api/web/lists/GetByTitle('" + listName + "')/items?$select=Title,KpiDescription&$top=5000",
 method: "GET",
 async: false,
 headers: { "Accept": "application/json; odata=verbose" },
 success: function (data) {
 //SUCCESS
 if (data.d.results.length > 0) { //Check list if have any Data
 var accordionHeader = '', accordionContent = '', accordionHTML = ''; //Declare Variables
 $.each(data.d.results, function (index, obj) {
 accordionHeader = obj.Title; if (accordionHeader == undefined) { accordionHeader = "NA"; } //Get value of Accordion List Title
 accordionContent = obj.KpiDescription; if (accordionContent == undefined) { accordionContent = "NA"; } //Get value of Accordion List Content
 //Push html tag into accordionHTML
 accordionHTML += '<div class="accordion-ItemWrap">';
 accordionHTML += '<h3 class="accordion-Header">'+ accordionHeader +'</h3>';
 accordionHTML += '<div class="accordion-Content">';
 accordionHTML += '<p>'+ accordionContent +'</p>';
 accordionHTML += '</div>';
 accordionHTML += '</div>';
 });
 $('.accordion-Wrapper .accordion-Items').html(accordionHTML); //Push whole accordionHTML string in accordion-Items
 }
 },
 error: function (data) {
 //ERROR
 console.log(data);
 }
 });
}
// Read Current URL parameters
function getQueryStringParameter(param) {
 var params = document.URL.split("?")[1].split("&"); //Split Current URL With ? after that &
 var strParams = "";
 for (var i = 0; i < params.length; i = i + 1) { //param,parse with given URL parameter
 var singleParam = params[i].split("=");
 if (singleParam[0] == param) {
 return decodeURIComponent(singleParam[1]); //Decode URL Result
 }
 }
}

var appweburl; //Getting App web url itself only

$(document).ready(function () {

//Get the decoded App Web URL

appweburl = getQueryStringParameter("SPAppWebUrl");

//Call AccordionListData function

getAccordionListData();

//Accordion Exapnd/Collapse on Header Click

$('.accordion-Items .accordion-Header').on('click', function (e) {

e.preventDefault();

if ($(this).hasClass('Expand')) {

//Slide Up Next accordion content

$(this).next().slideUp();

$(this).removeClass('Expand').addClass('Collapse');

} else {

//Slide Up Header Who have Expand Class

$('.Expand').removeClass('Expand').addClass('Collapse').next().slideUp();

//Slide Up Next accordion content

$(this).next().slideDown();

$(this).addClass('Expand').removeClass('Collapse');

}

});

function getAccordionListData() {

var listName = "Accordion List"; //Pass List Name here

//Make A Rest API Call to fetch data from created custom sharepoint add-in list

$.ajax({

url: appweburl + "/_api/web/lists/GetByTitle('" + listName + "')/items?$select=Title,KpiDescription&$top=5000",

method: "GET",

async: false,

headers: { "Accept": "application/json; odata=verbose" },

success: function (data) {

//SUCCESS

if (data.d.results.length > 0) { //Check list if have any Data

var accordionHeader = '', accordionContent = '', accordionHTML = ''; //Declare Variables

$.each(data.d.results, function (index, obj) {

accordionHeader = obj.Title; if (accordionHeader == undefined) { accordionHeader = "NA"; } //Get value of Accordion List Title

accordionContent = obj.KpiDescription; if (accordionContent == undefined) { accordionContent = "NA"; } //Get value of Accordion List Content

//Push html tag into accordionHTML

accordionHTML += '<div class="accordion-ItemWrap">';

accordionHTML += '<h3 class="accordion-Header">'+ accordionHeader +'</h3>';

accordionHTML += '<div class="accordion-Content">';

accordionHTML += '<p>'+ accordionContent +'</p>';

accordionHTML += '</div>';

});

$('.accordion-Wrapper .accordion-Items').html(accordionHTML); //Push whole accordionHTML string in accordion-Items

}

error: function (data) {

//ERROR

console.log(data);

}

});

}

// Read Current URL parameters

function getQueryStringParameter(param) {

var params = document.URL.split("?")[1].split("&"); //Split Current URL With ? after that &

var strParams = "";

for (var i = 0; i < params.length; i = i + 1) { //param,parse with given URL parameter

var singleParam = params[i].split("=");

if (singleParam[0] == param) {

return decodeURIComponent(singleParam[1]); //Decode URL Result

}

The HTML structure

<div class="accordion-Wrapper">
 <div class="accordion-Items">
 <div class="accordion-ItemWrap"><!--make repetitive this div wrap in each loop-->
 <h3 class="accordion-Header"> <!--Heading goes here--></h3>
 <div class="accordion-Content">
 <!--Main content goes here-->
 </div>
 </div>
 </div>
 <div class="clearFix"></div>
 </div>

</div>

</div>

The Accordion List Content

Add Data in Accordion List by clicking on New Item button. You can access Accordion List with following below URL pattern.

https://<ServerName>-<apphash>.<DomainName>/sites/<SiteName>/<AppName>/Lists/<ListName>/AllItems.aspx
Or
<a href="JavaScript:window.location = _spPageContextInfo.webAbsoluteUrl+'/Lists/Accordion List/AllItems.aspx';" title="Click Me To Open List">Accordion List</a>

https://<ServerName>-<apphash>.<DomainName>/sites/<SiteName>/<AppName>/Lists/<ListName>/AllItems.aspx

<a href="JavaScript:window.location = _spPageContextInfo.webAbsoluteUrl+'/Lists/Accordion List/AllItems.aspx';" title="Click Me To Open List">Accordion List</a>

Accordion List Data

The Basic Accordion App Output

Basic Accordion Page

How to Create a Basic Accordion SharePoint Hosted Add-in

Table of Contents

Create Basic Accordion Add-in Project

Create an Accordion List

Create a Style File

Create a Basic Accordion.aspx Page

Get in Touch

Leave a Reply Cancel reply

About Us

Table of Contents

Create Basic Accordion Add-in Project

Create an Accordion List

Create a Style File

Create a Basic Accordion.aspx Page

Get in Touch

Related articles

How to open document in iframe in SharePoint 2013?

Resize Add-In Parts dynamically in SharePoint Add-Ins

How to create List using List Template?

Leave a Reply Cancel reply