Accordion
Bootstrap default example
The default example does NOT work in the STPR. If you are using the default style, update it to match the primary style or the inverse style.
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>