Cardiff Council Content and design system

www.cardiff.gov.uk

Design

tools

Accessibility tools

style

ColoursWard translationsLinksHeader templateCardiff Council LogoWhitespaceHeadingsFont

layout

AccordionsTabsHighlight informationNotice blockTablesTilesPage wrapButton (Forms)Site notice with link

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>

Working Example

Content 1
Content 2