none
Whats the BEST way to Create Front End Editable Accordions. RRS feed

All replies

  • 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]

    Monday, May 13, 2019 6:52 PM
  • 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 tnmff@microsoft.com.

    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.

    Tuesday, May 14, 2019 1:59 AM
  • How is this related to my question? Did you read my question before posting this?
    Wednesday, May 15, 2019 1:25 PM
  • Hi Lee, can you please elborate how can this be implement in sharpoint?

    Wednesday, May 15, 2019 1:26 PM
  • 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 tnmff@microsoft.com.

    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.

    Thursday, May 16, 2019 7:43 AM
  • this did not turn out to work with the right functionalities. I decide to use something differnet
    Wednesday, May 22, 2019 1:27 PM