
Accordion
Create an accordion using the Sitecore editor
In the content tree, right click-the Addons folder for the page. Choose Insert, then Accordion row.
Give it a name for the accordion section heading, i.e. Frequently asked questions.
Right-click on the new accordion row. Choose Insert, then Accordion item.
Use the editor to add the question or heading, and the text that will expand when the user clicks.
Add as many items as you need. Use the Sitecore Sorting buttons to change the order.
Remember to use the green Approve button to approve each accordion item, and the accordion row, before publishing. Items that have not been approved will not publish.
Default example
Inverse Example
Primary Example
Or, create accordion code to fill in manually via HTML view
The tool below will generate a series of accordions for you. Just give it a name, fill in how many questions (or sections) you need, and generate the HTML code to paste into your page.
Using anchor links to open specific accordion items on page load
You can add some code that opens the accordion based on the URL hashtag. Plus, the page scrolls down to the open accordion panel too.
Put this custom script in the "Custom script block" for your page.
<script>
// Opening accordion based on URL
var url = document.location.toString();
if ( url.match('#') ) {
$('#'+url.split('#')[1]).addClass('in');
}
$(function(){
// scroll open accordion panel to top of the window
$(".panel-group").on("shown.bs.collapse", function () {
var myPanel = $(this).find('.collapse.in').prev('.panel-heading');
$('html, body').animate({
scrollTop: $(myPanel).offset().top
}, 500);
});
});
</script>