displaying items using JQuery Accordion Widget

Question

I want to Displays items using collapsible content panels for presenting information in a limited amount of space using accordion widget. Any idea

Answer 1

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));
        }  
    });
}

Answer 2

I use this sites example in a script editor web part.

http://jqueryui.com/accordion/

Answer 3

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