Asked by:
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
- Edited by lahsin Monday, May 13, 2019 1:44 PM spelling
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/
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/
-
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. -
-
-
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.- Proposed as answer by Grace WRMicrosoft contingent staff, Moderator Friday, May 17, 2019 8:30 AM
-