Accordions
Accordions help break up long content by grouping into panels that you can expand and collapse.
These accordions require jQuery to work
How to use this component
Accordions should be considered if there is a long page of content with clearly grouped sections.
These sections should naturally be split up by using Heading 2’s to make them easier to read and more accessible. If there are more than 3 H2 in use then it may be a good idea to use accordions to group the content.
Code Resource
<div role="tablist" class="tabpanel" id="accordian1">
<h2 aria-selected="false" role="tab" aria-controls="expand_01_open" id="expand_01" class="expand_button">Title 1</h2>
<div id="expand_01_open" class="expand_content">
Content 1
</div>
<h2 aria-selected="false" role="tab" aria-controls="expand_02_open" id="expand_02" class="expand_button">Title 2</h2>
<div id="expand_02_open" class="expand_content">
Content 2
</div>
</div>
<div class="ct_space"></div>
.expand_button {
float: left;
width: 100%;
padding-top: 25px!important;
padding-bottom: 35px !important;
padding-left: 25px;
color: #015b66!important;
margin-bottom: 0px !important;
margin-top: 0px !important;
text-decoration: none !important;
border-left: 2px #0e656f solid;
border-right: 0px silver solid;
border-bottom: 0px!important;
border-top: 0px silver solid !important;
font-size: 17px !important;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
opacity: 1;
font-weight: 400 !important;
background: #f5f5f5;
background-color: #f5f5f5;
margin-bottom: 6px;
border-bottom: 2px solid white!important;
cursor: pointer;
}
.expand_button:hover, .expand_button:focus {
border-left: 2px #0e656f solid;
background: #e6e4e4!important;
}
.expand_content {
float: left;
width: 100%;
padding: 20px;
margin-bottom: 50px;
border-left: 2px #0e656f solid;
padding-left: 30px;
padding-top: 39px;
}
.expand_content_close {
float: left;
margin-top: 50px;
border: 0px;
color: #015b66;
width: 100%;
text-align: center;
padding: 10px;
position: relative;
background: whitesmoke;
color: #074751!important;
border: 1px solid #e0e0e0!important;
border-radius: 4px;
cursor: pointer;
}
.expand_content_close:hover, .expand_content_close:focus {
background-color: #f1f1f1;
}
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script>
jQuery( document ).ready(function( $ ) {
var hold_accordian_divs = [];
function start_accordian(){
// hide all sections
$(".expand_button").each(function() {
var getaccid = $(this).attr('id');
// add tab indexs
$(this).attr("tabindex", "0");
// add div to array
hold_accordian_divs[getaccid] = 'closed';
// hide div
$('#'+getaccid+'_open').hide();
$('#'+getaccid+'_open').append('<button id="close_'+getaccid+'" data-close="'+getaccid+'" aria-controls="'+getaccid+'_open" type="button" class="expand_content_close">Close panel</button>');
});
$('.expand_content_close').click(function(event){
event.preventDefault();
var panel_close = $(this).data('close');
$('#'+panel_close+'_open').slideUp('medium');
hold_accordian_divs[panel_close] = 'closed';
$('#'+panel_close).attr("aria-selected", "false");
$('#'+panel_close).focus();
});
$('.expand_button').click(function(event) {
event.preventDefault();
var getaccid2 = $(this).attr('id');
// hide or show div
if(hold_accordian_divs[getaccid2] == 'closed'){
$('#'+getaccid2+'_open').slideDown('medium');
hold_accordian_divs[getaccid2] = 'open';
$('#'+getaccid2).attr("aria-selected", "true");
} else {
$('#'+getaccid2+'_open').slideUp('medium');
hold_accordian_divs[getaccid2] = 'closed';
$('#'+getaccid2).attr("aria-selected", "false");
}
});
// accesibility - enable clicking for spacebar and enter
$('.expand_button').keydown(function(ev) {
if (ev.which == 32 || ev.which == 13 ) {
$(this).click()
}
});
// auto open accordian on page load?
var hash = window.location.hash;
var parent_class = $('[name="' + hash.substr(1) + '"]').parent();
if ($(parent_class).hasClass( "expand_button" )){
var panel_open = $(parent_class).attr('aria-selected');
if(panel_open == 'false'){
$(parent_class).click();
}
}
}; //e start accordian
start_accordian();
});
</script>