1

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 3

3

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

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

http://jqueryui.com/accordion/

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.