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.
Table of Contents
- 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.
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
/*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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
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 } } } |
The HTML structure
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
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.
|
1 2 3 |
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> |
The Basic Accordion App Output
Further reading of this series:
How to create Hello World SharePoint Hosted Add-in
About add-in permissions in SharePoint Hosted Add-Ins
What is the Host Web URL and App Web URL in SharePoint add-in?
What is Manifest file in SharePoint Add-In?
Hope you find it helpful. If you liked this article, then please share and comment.
