Post
Ask Question

Creating Rich Style Accordion In SharePoint

Here, you are going to learn how to create an accordion using CSOM to automatically fetch data from the list, like below.



Features included

  1. Automatic data feed from the list
  2. Rich style using HTML5 and CSS3
  3. Capable of using n number of accordion length
  4. Four different types of accordion styles

Step 1

All we need for starting to create the accordion is the creation of a list for the accordion data. In my case, the list name is “Accordion” and the name is hard coded in the JS script to get the data from this particular list to create the accordion.

Refer to the below snapshot to create the same columns which are required for the list creation.

Or

Use the attached list template to create the list (Make sure, you are using the same name “Accordion”). Otherwise, you will have to change the list name in the source code also (in case a custom name needs to be placed)

List Columns



Step 2

While manually creating the list columns, please make sure you have added the below choice values for the “ContentType” field Values (Choice Field).

Please ignore, if you are going the use the attached list template.



Step 3

Once the list is created, feed the list with your data like below. The “ContentType” field will help you to choose the data display type in the page where you are going to place the accordion.

List Values



Step 4

Once the list item is added in your list, you are ready to place the code to make it accordion.

Step 5

Open the page where you want to place the accordion and add script editor or content editor to place the JavaScript.

Step 6

Refer to the below code and alter the site collection name as per your site. ( change the list name if you are using the list with a different name)

  1. <html>  
  2.   
  3. <head>  
  4.     <style>  
  5.         li.accordion {  
  6.             background-color: #e0eefb;  
  7.             color: #002664;  
  8.             cursor: pointer;  
  9.             padding: 3px;  
  10.             width: 95%;  
  11.             font-family: 'Arial';  
  12.             text-align: left;  
  13.             outline: none;  
  14.             font-size: 13px;  
  15.             transition: 0.4s;  
  16.             list-style-type: none;  
  17.             border-radius: 1px;  
  18.             border: 1px solid #98c6f3;  
  19.         }  
  20.           
  21.         li.accordion:hover {  
  22.             margin-left: 8px;  
  23.         }  
  24.           
  25.         li.accordion:after {  
  26.             content: '\25bc';  
  27.             font-size: 13px;  
  28.             color: black;  
  29.             float: right;  
  30.             margin-left: 5px;  
  31.         }  
  32.           
  33.         li.accordion.active:after {  
  34.             content: "\25b2";  
  35.         }  
  36.           
  37.         div.panel {  
  38.             padding: 0 8px;  
  39.             font-family: 'arial';  
  40.             background-color: white;  
  41.             max-height: 0;  
  42.             margin-top: 2px;  
  43.             margin-bottom: 2px;  
  44.             overflow: hidden;  
  45.             transition: 0.6s ease-in-out;  
  46.             opacity: 0;  
  47.             border-left: 2px groove #006080;  
  48.         }  
  49.           
  50.         div.panel.show {  
  51.             opacity: 1;  
  52.             max-height: 500px;  
  53.             width: 94%;  
  54.         }  
  55.     </style>  
  56.     <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>  
  57.     <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>  
  58.     <script type="text/javascript" src="/_layouts/15/sp.js"></script>  
  59.     <script>  
  60.         'use strict';  
  61.   
  62.         var context = SP.ClientContext.get_current();  
  63.         var list;  
  64.         var listItemCount;  
  65.         var itemCollections;  
  66.         var item;  
  67.         var listTitle = 'Accordion';  
  68.         (function() {  
  69.   
  70.             // This code runs when the DOM is ready and creates a context object which is   
  71.             // needed to use the SharePoint object model  
  72.             $(document).ready(function() {  
  73.                 list = context.get_web().get_lists().getByTitle('Accordion');  
  74.                 context.load(list);  
  75.                 context.executeQueryAsync(onSucceed, onFailure);  
  76.             });  
  77.   
  78.         })();  
  79.   
  80.         function onSucceed() {  
  81.             listItemCount = list.get_itemCount();  
  82.             if (listItemCount > 0) {  
  83.                 var camlQuery = new SP.CamlQuery.createAllItemsQuery();  
  84.                 itemCollections = list.getItems(camlQuery);  
  85.                 context.load(itemCollections);  
  86.                 context.executeQueryAsync(onQuerySucceed, onQueryFailed)  
  87.             } else {  
  88.                 $('#divAccordian').append('<p>Feed the list to configure the accordian data</p>');  
  89.             }  
  90.   
  91.         }  
  92.   
  93.         function onFailure(sender, args) {  
  94.             alert('Something went worng! <br>' + args.get_message());  
  95.         }  
  96.   
  97.         function onQuerySucceed() {  
  98.             var _count = 0;  
  99.             var _itemEnum = itemCollections.getEnumerator();  
  100.             while (_itemEnum.moveNext()) {  
  101.                 item = _itemEnum.get_current();  
  102.                 var _title = item.get_item('Title');  
  103.                 var _contentType = item.get_item('ContentType0');  
  104.                 var _description = item.get_item('Description');  
  105.                 var _imageURL = item.get_item('ImageURL');  
  106.                 buildHTML(_title, _contentType, _description, _imageURL, _count);  
  107.                 _count++;  
  108.             }  
  109.             var acc = document.getElementsByClassName("accordion");  
  110.             var i;  
  111.             var j;  
  112.   
  113.             for (i = 0; i < acc.length; i++) {  
  114.   
  115.   
  116.                 acc[i].onclick = function() {  
  117.                     for (j = 0; j < acc.length; j++) {  
  118.                         if (i != j) {  
  119.                             document.getElementById(listTitle + "_foo" + j).classList.remove("show");  
  120.                             document.getElementById(listTitle + "_woo" + j).classList.remove("active");  
  121.                         }  
  122.                     }  
  123.                     this.classList.toggle("active");  
  124.                     this.nextElementSibling.classList.toggle("show");  
  125.   
  126.                 }  
  127.             }  
  128.         }  
  129.   
  130.         function onQueryFailed(sender, args) {  
  131.             alert('Something went wrong while getting item from enum: ' + args.get_message())  
  132.         }  
  133.   
  134.         function buildHTML(_title, _contentType, _description, _imageURL, _count) {  
  135.             var _content = '';  
  136.             for (var i = 0; i < listItemCount; i++) {  
  137.                 _content = '<li id="' + listTitle + '_woo' + _count + '" class="accordion">' + _title + '</li>';  
  138.                 _content += '<div id="' + listTitle + '_foo' + _count + '" class="panel">';  
  139.                 if (_contentType === 'image') {  
  140.                     _content += '<img src="' + _imageURL + '" alt="' + _title + '_image" />';  
  141.                 } else if (_contentType === 'text') {  
  142.                     _content += '<p>' + _description + '</p>';  
  143.                 } else if (_contentType === 'text_image') {  
  144.                     _content += '<div><img src="' + _imageURL + '" alt="' + _title + '_image" /></div>';  
  145.                     _content += '<div><p>' + _description + '</p></div>';  
  146.                 } else if (_contentType === 'left_image_right_text') {  
  147.                     _content += '<div><span style="vertical-align:top; float:left; padding:3px"><img src="' + _imageURL + '" alt="' + _title + '_image" /></span></div>';  
  148.                     _content += '<div><span style="vertical-align:top; padding:3px; padding-left:10px"><p>' + _description + '</p></span></div>';  
  149.                 }  
  150.                 _content += '</div>';  
  151.             }  
  152.             _content += '</div>';  
  153.             $('#divAccordian').append(_content);  
  154.         }  
  155.     </script>  
  156. </head>  
  157.   
  158. <body>  
  159.     <div id="divAccordian">  
  160.   
  161.     </div>  
  162. </body>  
  163.   
  164. </html>  
Step 7

Stop editing and open the page. You will find the accordion in your page with your data.

Sample 1



Sample 2



Sample 3



Sample 4

 


Similar Articles