Whats the BEST way to Create Front End Editable Accordions.

Question

Hello I have been trying different technique to create accordion in sharepoint but so far whenever i choose to edit, it gets messed up. Does anyone know to I can achieve this> https://codyhouse.co/demo/faq-template/index.html? Please share any ideas

Thanks 

Answer 1

Hi lahsin,

There are a few options you could do, first is this for content that you retrieve (e.g. from a list) or is it content that is manually authored. 

If it's from content that you retrieve, then one option is to modify a Content Query Web Part styles, such that the dynamic content that is pulled will have the appropriate styling
https://blogs.msdn.microsoft.com/ecm/2006/10/25/configuring-and-customizing-the-content-query-web-part/

https://blogs.msdn.microsoft.com/ecm/2006/10/30/building-tylerbutler-com-part-1-planning-and-basic-branding/

If it's a list that is manually authored, then I recommend looking at customizing the summary link web part:

https://surendratech.blogspot.com/2013/06/customizing-styles-of-summary-links-web.html

Also one alternative is to leverage some open source accordion design e.g. https://1stwebdesigner.com/css-accordion-menu-methods/

Adri Verlaan [MSFT]

Answer 2

Hi

You could create a list to store the according data suggested by Adri Verlaan.

Then, load the data and display by below script.

https://stackoverflow.com/questions/37984216/bootstrap-accordion-with-arrows

Sample script to get multiple lines text field value for your reference.

<script type="text/javascript">
        ExecuteOrDelayUntilScriptLoaded(CustomFun, "sp.js");
        function CustomFun(){
            getItemById(1);
        }        
        function getItemById(itemId)
        {
            var clientContext = new SP.ClientContext.get_current();
            var web = clientContext.get_web();
            var list = web.get_lists().getByTitle('MyList');
            var item = list.getItemById(itemId);
            clientContext.load(item);
            clientContext.executeQueryAsync(
                            Function.createDelegate(this,
                                function () {
                                    alert(item.get_item('MultiLine'));
                                }),
                            Function.createDelegate(this,
                                function (sender, args) {
                                    console.log(args);
                                }));
        }       
    </script>

Best Regards,

Lee

---

Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact [e-mail].

SharePoint Server 2019 has been released, you can click here to download it.
Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

Answer 3

How is this related to my question? Did you read my question before posting this?

Answer 4

Hi Lee, can you please elborate how can this be implement in sharpoint?

Answer 5

Hi,

Here is demo for your reference.

Create a custom list with OOB title filed and a custom Multiple lines of text field, so you just need update the list item data.

Insert sample data.

Create a page and insert content editor webpart into the page and inert below script into content editor webpart.

<style type="text/css">       
        .panel-heading {
            ;
        }

        .panel-heading[data-toggle="collapse"]:after {
            font-family: 'Glyphicons Halflings';
            content: "\e072"; /* "play" icon */
            ;
            color: #b0c5d8;
            font-size: 18px;
            line-height: 22px;
            right: 20px;
            top:5px;
            top: calc(50% - 10px);
            /* rotate "play" icon from > (right arrow) to down arrow */
            -webkit-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }

        .panel-heading[data-toggle="collapse"].collapsed:after {
            /* rotate "play" icon from > (right arrow) to ^ (up arrow) */
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
        }
    </style>
    <!-- language: lang-html -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
    </script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <script type="text/javascript">
        ExecuteOrDelayUntilScriptLoaded(CustomFun, "sp.js");
        function CustomFun() {
            var context = new SP.ClientContext.get_current();
            var web = context.get_web();
            var list = web.get_lists().getByTitle('Accordions');
            var query = SP.CamlQuery.createAllItemsQuery();
            allItems = list.getItems(query);
            context.load(allItems, 'Include(ID,Title,MultiLine)');
            context.executeQueryAsync(Function.createDelegate(this, function(){                
                var ListEnumerator = this.allItems.getEnumerator();
                while (ListEnumerator.moveNext()) {
                    var currentItem = ListEnumerator.get_current();
                    var _ID = currentItem.get_item('ID');
                    var _Title = currentItem.get_item('Title');
                    var _Content = currentItem.get_item('MultiLine');
                    $('#accordion').append($('<div class="panel panel-default">'+
                    '<div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse' + _ID + '">' +
                        '<h4 class="panel-title">'+_Title+'</h4>'+
                    '</div>'+
                    '<div id="collapse' + _ID + '" class="panel-collapse collapse">' +
                        '<div class="panel-body">'+
                            '<p>' + _Content + '</p>' +
                        '</div>'+
                    '</div>'+
                '</div>'));

                }
            }), Function.createDelegate(this, function(sender,args){
                alert('failed. Message:' + args.get_message());
            }));
        }              
    </script>    

    <div class="panel-group" id="accordion">        
    </div>

Best Regards,

Lee

---

Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact [e-mail].

SharePoint Server 2019 has been released, you can click here to download it.
Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

Answer 6

this did not turn out to work with the right functionalities. I decide to use something differnet