I want to Displays items using collapsible content panels for presenting information in a limited amount of space using accordion widget. Any idea
3 Answers
Below is some sample code from a jQuery accordion solution I implemented. It pulls data from a SharePoint list using REST API and uses the returned JSON to build out accordion elements in the UI
HTML:
<div class="accordion">
<h3 id="dotcomTab">url.com</h3>
<div class="accordionData">
<div class="accordion">
<h3 id="custretTab">Customer Returns</h3>
<div class="accordionData">
<div class="accordion" id="customerreturnsSubItems">
</div>
</div>
<h3 id="entfulTab">Enterprise Fulfillment</h3>
<div class="accordionData">
<div class="accordion" id="entfulSubItems">
</div>
</div>
<h3 id="lcretTab">Logistic Center (LC) Returns</h3>
<div class="accordionData">
<div class="accordion" id="lcretSubItems">
</div>
</div>
<h3 id="orderinvTab">Order Invoice Questions</h3>
<div class="accordionData">
<div class="accordion" id="orderinvoiceSubItems">
</div>
</div>
<h3 id="reportsTab">Reports</h3>
<div class="accordionData">
<div class="accordion" id="reportsSubItems">
</div>
</div>
<h3 id="shipTab">Shipment Questions</h3>
<div class="accordionData">
<div class="accordion" id="shipmentSubItems">
</div>
</div>
</div>
</div>
</div>
JQuery AJAX call to get data and build UI:
function GetItems(category, selector){
$.ajax({
url: "SiteURL('ListName')/items?$filter=((Category eq '"+category+"') and (ItemStatus eq 'Active'))",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
},
success: function(data) {
$.each(data.d.results, function(index, item) {
$(selector).append("<h3>" + item.Title + "</h3>" + "<div>" + item.ItemName + "<br>" + "<div>" + "<p>" + "Posted On:" + "</p>" + item.CreatedDate + "</div>" + "</div>").accordion("refresh");
});
},
error: function(error){
alert(JSON.stringify(error));
}
});
}
I use this sites example in a script editor web part.
There is a Microsoft article on how an SPFx Accordion webpart can be created.
Check it out - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part