Implementation Of Jquery Accordion For SharePoint List Data

Let’s get started.

Basically, an accordion is a panel, which displays collapsible content for presenting information in a limited amount of space

HTML code given below along with jQuery is used to display the accordion.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion Example </title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
setdata()
$("#accordion-1").accordion({
heightStyle: "content"
});
});
</script>
<style>
#accordion-1 {
font-size: 14px;
}
</style>
</head>
<body>
<div id="accordion-1">
<h3>Tab 1</h3>
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<h3>Tab 2</h3>
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<h3>Tab 3</h3>
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
</body>
</html>

In the above code we are loading two jquery files(jquery.js and jquery-ui.js) and one css file which is related jquery ui, the html file when opened in browser will be like below,

Each of the divisions can be collapsible and when opened, it displays the content present within it.

Implementing Accordion in Sharepoint

We can implement accordion for Sharepoint list and the list should have two columns, where one is a single line of text for holding heading and other is multiline text for the content.

The picture given below shows sample data, which we will create for the list.

The list given above shows the countries in the title column and the description column will have the content to be displayed.

The code given below is used to display the AccordionList data in jQuery accordion format.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion Example </title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
setdata();
$("#accordion-1").accordion({
heightStyle: "Content",
collapsible: true
});
});
function setdata() {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', Test);
}
function Test() {
$("#India").empty();
$("#Australia").empty();
$("#England").empty();
var clientcontext = new SP.ClientContext();
var web = clientcontext.get_web();
var list = web.get_lists().getByTitle('AccordionList');
listitems = list.getItems(SP.CamlQuery.createAllItemsQuery());
clientcontext.load(listitems);
clientcontext.executeQueryAsync(success, failure);
}
function success() {
var listitemenumerator = listitems.getEnumerator();
while (listitemenumerator.moveNext()) {
var item = listitemenumerator.get_current().get_item('Title');
var description = listitemenumerator.get_current().get_item('Description');
if (item == "India") {
$("#India").append("<p>" + description + "</p>");
} else if (item == "Australia") {
$("#Australia").append("<p>" + description + "</p>");
} else {
$("#England").append("<p>" + description + "</p>");
}
}
}
function failure() {
alert("request failed" + args.get_message());
}
</script>
<style>
#accordion-1 {
font-size: 20px;
}
</style>
</head>
<body>
<div id="accordion-1">
<h3>About India</h3>
<div id="India"> </div>
<h3>About Australia </h3>
<div id="Australia"> </div>
<h3>About England</h3>
<div id="England"> </div>
</div>
</body>
</html>

Summary of the code

The function setdata will load all the required JS files for Sharepoint client side object model, fetch the current context of Sharepoint site and get the required list, all the items in the list are obtained.
The Success function will get each item, using itemenumerator and for each item, we are checking the title with the predefined values (like India, Australia, England) if the title equal the value, then we are binding the respective div with the description value of that particular item.
After completion of Success function, accordion function is called on the main div tag ( just after body tag), which displays the div in the accordion format.

The figure given below shows how accordion is displayed.

When First div is opened, the screenshot will be displayed, as shown below.

When Second div is opened, the screenshot will be displayed, as shown below.

When Third div is opened, the screenshot will be displayed, as shown below.

The code can be tweaked, as per various requirements. This is a just a simple implementation.

3 Comments

Join the conversation! Your thoughts help the community grow.

Pradeep RN7y ago
Can you try using Hillybilly js file for customizing new,edit and display form in sharepoint online, please find this link https://github.com/mrackley/HillbillyTemplate
Pradeep RN7y ago
Hi SaMol P,
SaMol P7y ago
How to get the list items in a expandable/collapsable items in this way? for the newform.aspx in the sp online list? pls help