accordions

Accordion Styling

If you enable easy accordions on a page or post, you may wish to style them differently from their default CSS. Below are a few different style options with code that you can add to your custom CSS.

Note: The colors are marked in red — feel free to change them to whatever HEX codes you want!

Sleek Accordions

Code

.accordion .panel {
border:0 solid transparent
}

.accordion .panel-default > .panel-heading {
background:none;
padding:5px;
border-bottom:2px solid #0f4786
}

.accordion h4.panel-title a:before {
font-family:'Glyphicons Halflings';
content:"\e259";
font-size:10px;
padding-right:5px
}

.subpage .widget .accordion .panel-title a {
color:#0f4786;
text-decoration:none;
font-size:18px;
font-weight:700
}

Example

Panel 1 Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper, justo sed ultrices aliquam, arcu tellus malesuada ante, eget faucibus ante ex id leo. Nunc rutrum, neque nec elementum vulputate, tellus nisi molestie neque, non viverra diam felis sollicitudin diam. Sed venenatis, ipsum sit amet pharetra congue, arcu velit viverra metus, sed iaculis neque libero ac lorem. Praesent dolor turpis, porttitor a augue ac, euismod suscipit magna. Nunc tellus tortor, dapibus at facilisis ut, maximus sed lacus. Nullam et est vitae mauris ornare accumsan. In eu dictum metus. Suspendisse ullamcorper ligula ut fringilla feugiat. Etiam iaculis consectetur varius. Phasellus hendrerit blandit lorem, commodo fringilla purus finibus at.

Panel 2 Title

Proin consectetur, quam quis cursus molestie, quam nunc blandit purus, eu facilisis augue nisl quis felis. In id fermentum felis. Curabitur nec felis sed elit rutrum malesuada sit amet nec ipsum. Donec ac efficitur dui. Fusce semper blandit purus, at eleifend arcu tristique commodo. Suspendisse turpis arcu, aliquet nec rutrum lacinia, interdum sed eros. Proin finibus, felis eget finibus molestie, erat ante mollis leo, et condimentum nunc lectus a velit.

Panel 3 Title

Integer sed laoreet justo. Cras quis urna rutrum, faucibus augue sed, vestibulum enim. Donec porta nulla quis neque rutrum pellentesque. Nulla gravida at dui quis vestibulum. Sed sed ante ac ipsum suscipit mollis. Mauris purus ligula, egestas vitae gravida viverra, tincidunt ac enim. Suspendisse iaculis sem eros, non iaculis est rhoncus sit amet. Aliquam elementum lacinia tempor. Integer accumsan lacus elit, nec mattis eros dictum in. Phasellus auctor est quam, nec euismod quam facilisis quis. Vivamus gravida ante venenatis, dignissim nunc et, pellentesque nisl. Suspendisse lobortis accumsan massa, consectetur fringilla sapien volutpat ut. Pellentesque at arcu at enim condimentum faucibus. Nullam at lectus augue. Curabitur vitae elit ipsum. Suspendisse vel convallis metus.

Modern Accordions

Code

.accordion .panel-default > .panel-heading {
background:linear-gradient(#eaeaea,#fff);
border-radius:6px
}

.accordion.panel-group .panel {
border-radius:6px
}

.accordion .panel-default > .panel-heading + .panel-collapse > .panel-body {
border-top:0 solid transparent
}

.subpage .widget .accordion .panel-title a {
color:#0f4786;
font-size:20px;
text-decoration:none
}

Example

Panel 1 Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper, justo sed ultrices aliquam, arcu tellus malesuada ante, eget faucibus ante ex id leo. Nunc rutrum, neque nec elementum vulputate, tellus nisi molestie neque, non viverra diam felis sollicitudin diam. Sed venenatis, ipsum sit amet pharetra congue, arcu velit viverra metus, sed iaculis neque libero ac lorem. Praesent dolor turpis, porttitor a augue ac, euismod suscipit magna. Nunc tellus tortor, dapibus at facilisis ut, maximus sed lacus. Nullam et est vitae mauris ornare accumsan. In eu dictum metus. Suspendisse ullamcorper ligula ut fringilla feugiat. Etiam iaculis consectetur varius. Phasellus hendrerit blandit lorem, commodo fringilla purus finibus at.

Panel 2 Title

Proin consectetur, quam quis cursus molestie, quam nunc blandit purus, eu facilisis augue nisl quis felis. In id fermentum felis. Curabitur nec felis sed elit rutrum malesuada sit amet nec ipsum. Donec ac efficitur dui. Fusce semper blandit purus, at eleifend arcu tristique commodo. Suspendisse turpis arcu, aliquet nec rutrum lacinia, interdum sed eros. Proin finibus, felis eget finibus molestie, erat ante mollis leo, et condimentum nunc lectus a velit.

Panel 3 Title

Integer sed laoreet justo. Cras quis urna rutrum, faucibus augue sed, vestibulum enim. Donec porta nulla quis neque rutrum pellentesque. Nulla gravida at dui quis vestibulum. Sed sed ante ac ipsum suscipit mollis. Mauris purus ligula, egestas vitae gravida viverra, tincidunt ac enim. Suspendisse iaculis sem eros, non iaculis est rhoncus sit amet. Aliquam elementum lacinia tempor. Integer accumsan lacus elit, nec mattis eros dictum in. Phasellus auctor est quam, nec euismod quam facilisis quis. Vivamus gravida ante venenatis, dignissim nunc et, pellentesque nisl. Suspendisse lobortis accumsan massa, consectetur fringilla sapien volutpat ut. Pellentesque at arcu at enim condimentum faucibus. Nullam at lectus augue. Curabitur vitae elit ipsum. Suspendisse vel convallis metus.

Statement Accordions

Code

.accordion .panel {
border:3px solid #000
}

.accordion .panel-title {
font-weight:700;
text-align:center;
text-transform:uppercase;
letter-spacing:2px
}

.accordion .panel-default > .panel-heading {
background:#fff
}

.subpage .accordion .panel-title a {
color:#000;
text-decoration:none
}

.panel-group .panel-heading + .panel-collapse > .panel-body,.panel-group .panel-heading + .panel-collapse > .list-group {
border-width:0
}

Example

Panel 1 Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper, justo sed ultrices aliquam, arcu tellus malesuada ante, eget faucibus ante ex id leo. Nunc rutrum, neque nec elementum vulputate, tellus nisi molestie neque, non viverra diam felis sollicitudin diam. Sed venenatis, ipsum sit amet pharetra congue, arcu velit viverra metus, sed iaculis neque libero ac lorem. Praesent dolor turpis, porttitor a augue ac, euismod suscipit magna. Nunc tellus tortor, dapibus at facilisis ut, maximus sed lacus. Nullam et est vitae mauris ornare accumsan. In eu dictum metus. Suspendisse ullamcorper ligula ut fringilla feugiat. Etiam iaculis consectetur varius. Phasellus hendrerit blandit lorem, commodo fringilla purus finibus at.

Panel 2 Title

Proin consectetur, quam quis cursus molestie, quam nunc blandit purus, eu facilisis augue nisl quis felis. In id fermentum felis. Curabitur nec felis sed elit rutrum malesuada sit amet nec ipsum. Donec ac efficitur dui. Fusce semper blandit purus, at eleifend arcu tristique commodo. Suspendisse turpis arcu, aliquet nec rutrum lacinia, interdum sed eros. Proin finibus, felis eget finibus molestie, erat ante mollis leo, et condimentum nunc lectus a velit.

Panel 3 Title

Integer sed laoreet justo. Cras quis urna rutrum, faucibus augue sed, vestibulum enim. Donec porta nulla quis neque rutrum pellentesque. Nulla gravida at dui quis vestibulum. Sed sed ante ac ipsum suscipit mollis. Mauris purus ligula, egestas vitae gravida viverra, tincidunt ac enim. Suspendisse iaculis sem eros, non iaculis est rhoncus sit amet. Aliquam elementum lacinia tempor. Integer accumsan lacus elit, nec mattis eros dictum in. Phasellus auctor est quam, nec euismod quam facilisis quis. Vivamus gravida ante venenatis, dignissim nunc et, pellentesque nisl. Suspendisse lobortis accumsan massa, consectetur fringilla sapien volutpat ut. Pellentesque at arcu at enim condimentum faucibus. Nullam at lectus augue. Curabitur vitae elit ipsum. Suspendisse vel convallis metus.

Bold Accordions

Code

.accordion .panel-heading{
border-radius:0;
}

.accordion .panel:first-child,.accordion .panel:first-child .panel-heading {
border-top-left-radius:6px;
border-top-right-radius:6px
}

.accordion .panel:last-child,.accordion .panel:last-child .panel-body {
border-bottom-left-radius:6px;
border-bottom-right-radius:6px
}

.accordion .panel + .panel {
margin:0;
border-top-width:0
}

.accordion .panel .panel-heading {
background:#0f4786
}

.accordion .panel-default .panel-body {
background:#5589C3;
color:#fff
}

.subpage .widget .accordion .panel-heading a,.subpage .widget .accordion .panel-heading a:hover,.subpage .widget .accordion .panel-heading a:active {
color:#fff;
font-size:14px;
text-decoration:none
}

Example

Panel 1 Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper, justo sed ultrices aliquam, arcu tellus malesuada ante, eget faucibus ante ex id leo. Nunc rutrum, neque nec elementum vulputate, tellus nisi molestie neque, non viverra diam felis sollicitudin diam. Sed venenatis, ipsum sit amet pharetra congue, arcu velit viverra metus, sed iaculis neque libero ac lorem. Praesent dolor turpis, porttitor a augue ac, euismod suscipit magna. Nunc tellus tortor, dapibus at facilisis ut, maximus sed lacus. Nullam et est vitae mauris ornare accumsan. In eu dictum metus. Suspendisse ullamcorper ligula ut fringilla feugiat. Etiam iaculis consectetur varius. Phasellus hendrerit blandit lorem, commodo fringilla purus finibus at.

Panel 2 Title

Proin consectetur, quam quis cursus molestie, quam nunc blandit purus, eu facilisis augue nisl quis felis. In id fermentum felis. Curabitur nec felis sed elit rutrum malesuada sit amet nec ipsum. Donec ac efficitur dui. Fusce semper blandit purus, at eleifend arcu tristique commodo. Suspendisse turpis arcu, aliquet nec rutrum lacinia, interdum sed eros. Proin finibus, felis eget finibus molestie, erat ante mollis leo, et condimentum nunc lectus a velit.

Panel 3 Title

Integer sed laoreet justo. Cras quis urna rutrum, faucibus augue sed, vestibulum enim. Donec porta nulla quis neque rutrum pellentesque. Nulla gravida at dui quis vestibulum. Sed sed ante ac ipsum suscipit mollis. Mauris purus ligula, egestas vitae gravida viverra, tincidunt ac enim. Suspendisse iaculis sem eros, non iaculis est rhoncus sit amet. Aliquam elementum lacinia tempor. Integer accumsan lacus elit, nec mattis eros dictum in. Phasellus auctor est quam, nec euismod quam facilisis quis. Vivamus gravida ante venenatis, dignissim nunc et, pellentesque nisl. Suspendisse lobortis accumsan massa, consectetur fringilla sapien volutpat ut. Pellentesque at arcu at enim condimentum faucibus. Nullam at lectus augue. Curabitur vitae elit ipsum. Suspendisse vel convallis metus.

Accordions

Sometimes, you may find that a page or post has too much information and requires a lot of scrolling as a result. One way to fix this is by using collapsible accordions. You will need to use the Page Builder editor.

Creating Accordions

In Page Builder, create one new Visual Editor widget for each item in the accordion. In each Visual Editor widget, click on Attributes and check the box under Accordion, so that it is enabled. Then, add the title and content. Note that the title of the visual editor becomes the accordion header, and clicking on the title will expand the item's content. So, each Visual Editor with Accordion enabled must contain a title in the Title field.

If you stack multiple Visual Editors with Accordion enabled on top of each other (in the same column), they will be grouped together and as a result, clicking on one item’s title will expand its content while collapsing all other items.

Styling Accordions

Accordions are easily to style using your site's Custom CSS. We have also put together a guide with several pre-made accordion styles along with CSS that you can copy and paste onto your own website.

Below is an example of an accordion menu.

Panel 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper, justo sed ultrices aliquam, arcu tellus malesuada ante, eget faucibus ante ex id leo. Nunc rutrum, neque nec elementum vulputate, tellus nisi molestie neque, non viverra diam felis sollicitudin diam. Sed venenatis, ipsum sit amet pharetra congue, arcu velit viverra metus, sed iaculis neque libero ac lorem. Praesent dolor turpis, porttitor a augue ac, euismod suscipit magna. Nunc tellus tortor, dapibus at facilisis ut, maximus sed lacus. Nullam et est vitae mauris ornare accumsan. In eu dictum metus. Suspendisse ullamcorper ligula ut fringilla feugiat. Etiam iaculis consectetur varius. Phasellus hendrerit blandit lorem, commodo fringilla purus finibus at.

Panel 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat commodo elit sit amet mollis. Sed condimentum ipsum sed nulla malesuada sagittis. In mattis interdum dolor eget tempus. Morbi dapibus volutpat arcu, et finibus mi ultricies quis. Donec blandit sapien enim, ut volutpat tellus tempus aliquet. Sed at turpis lectus. Ut sed posuere leo, sit amet condimentum sem. Nam bibendum augue lacus, nec laoreet diam congue et. Suspendisse eget rhoncus magna, ac tincidunt orci. Nam porttitor gravida urna id feugiat. Nullam consequat vehicula tortor, id interdum ex luctus vitae. Nullam dignissim tortor nec molestie condimentum. Donec ante turpis, varius a interdum nec, lobortis venenatis nunc.

Proin consectetur, quam quis cursus molestie, quam nunc blandit purus, eu facilisis augue nisl quis felis. In id fermentum felis. Curabitur nec felis sed elit rutrum malesuada sit amet nec ipsum. Donec ac efficitur dui. Fusce semper blandit purus, at eleifend arcu tristique commodo. Suspendisse turpis arcu, aliquet nec rutrum lacinia, interdum sed eros. Proin finibus, felis eget finibus molestie, erat ante mollis leo, et condimentum nunc lectus a velit. Proin et lacus posuere, tincidunt elit quis, dapibus augue. Fusce placerat tempus efficitur. Etiam nec facilisis velit. Curabitur vulputate dolor ac metus sollicitudin, in commodo lacus aliquam. Sed risus dui, fringilla non ultricies non, pellentesque non enim. Vestibulum ut ornare nulla, non malesuada erat.

Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam.

Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus.

Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede.

Panel 3

Integer sed laoreet justo. Cras quis urna rutrum, faucibus augue sed, vestibulum enim. Donec porta nulla quis neque rutrum pellentesque. Nulla gravida at dui quis vestibulum. Sed sed ante ac ipsum suscipit mollis. Mauris purus ligula, egestas vitae gravida viverra, tincidunt ac enim. Suspendisse iaculis sem eros, non iaculis est rhoncus sit amet. Aliquam elementum lacinia tempor. Integer accumsan lacus elit, nec mattis eros dictum in. Phasellus auctor est quam, nec euismod quam facilisis quis. Vivamus gravida ante venenatis, dignissim nunc et, pellentesque nisl. Suspendisse lobortis accumsan massa, consectetur fringilla sapien volutpat ut. Pellentesque at arcu at enim condimentum faucibus. Nullam at lectus augue. Curabitur vitae elit ipsum. Suspendisse vel convallis metus.

Maecenas vel finibus metus. Maecenas eu aliquam nunc. Sed eros nisl, ornare ut laoreet et, pulvinar vestibulum elit. Etiam ultricies pretium dignissim. Phasellus fringilla vestibulum erat, egestas faucibus purus congue ut. Aenean rhoncus maximus augue, quis bibendum velit laoreet et. Integer a consectetur enim. Sed cursus urna blandit dui elementum mollis. Praesent sit amet dolor imperdiet, cursus lacus id, venenatis urna. Aenean ac dolor lorem.

Here is what the edit screen of this page looks like:

easy-accordions-edit-screen

Note that only the second, third, and fourth Visual Editors have Accordion enabled.

Collapsible Accordion Menus

Aurora now has Easy Accordions which are recommended to use instead of Collapsible Accordion Menus. Check out the Easy Accordions Guide for how to use them.

 

Sometimes, you may find that a page or post has too much information and requires a lot of scrolling as a result. One way to fix this is by using collapsible accordion menus. To learn more about how to create these with HTML, visit Bootstrap’s JavaScript guide page. Below is some sample HTML for an accordion menu along with its result.

 

**Accordions are a very advanced feature and are easy to break. Flipping between text/visual when editing your page can cause issues and we recommend that you only edit the page in text mode.

<div id="accordion" class="panel-group">
<div class="panel panel-default">
<a class="collapsed" href="#collapse1" data-toggle="collapse" data-parent="#accordion">
<div class="panel-heading">
<h2 class="panel-title">Panel 1 Heading</h2>
</div></a>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

</div>
</div>
</div>
<div class="panel panel-default">
<a class="collapsed" href="#collapse2" data-toggle="collapse" data-parent="#accordion">
<div class="panel-heading">
<h2 class="panel-title">Panel 2 Heading</h2>
</div></a>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

</div>
</div>
</div>
<div class="panel panel-default">
<a class="collapsed" href="#collapse3" data-toggle="collapse" data-parent="#accordion">
<div class="panel-heading">
<h2 class="panel-title">Panel 3 Heading</h2>
</div></a>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

</div>
</div>
</div>
</div>

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.