OA Accordion

We have a custom lightweight accordion that will only open one accordion at a time. No javascript editing required. You can even use this to have stuff show up on desktop, and become an accordion at smaller sizes (examples further down).

Grouping Accordions

The accordions are set up to toggle one at a time if they're in a group. A parent element containing all the accordions you want to be in a group just needs the class of "oaAccGroup" in order to work.

Examples (not limited to):

OR

If you do not want them in a group, just don't have them as a descendent of a "oaAccGroup" class element.

Styling & Element Guide

The accordion comes with almost no styling so that you can customize it to fit your design. It come pre-baked with a few classes you can use to style the content, the button, and when the content of a button is showing. The only thing required is the ".oaAcc{display: none;}" because that's what makes the content hidden in the first place.

.oaClick & .oaClick:hover

This is the class for the buttons to make the dropdowns toggle. You can style the buttons, or simply add a 'ssButton' class to give it the styles you want (and it can be a div, a button, or whatever element you need it to be).

OR

.oaClick.showing

.oaClick gains the class of "showing" when it has toggled one of the content divs. You can style .oaClick.showing to have the buttons have different style while they're showing (see example at the top).

You can also target elements inside like a chevron icon to have them rotate when showing content: .oaClick.showing .icon{transform: rotate(180deg);}

.oaAcc

This element should be a div, but it is the element that contains the content to be toggled in a dropdown. You can put styles on it, or put divs and elements inside of it an style them instead.

data-dropdown & id

In order to make sure the buttons toggle the right content divs (the content doesn't have to come immdeiately after the clicker like in old versions), the 'data-dropdown' attribute on a .oaClick needs to have a value that matches the id of the content div.

If you want one particular content element to be styled, you can just target that id in your styles: #dropdown2{background: red;}

Important: The id for each content div must be unique, otherwise the wrong thing will end up toggling, and the data-dropdown value must match the id of the correct content element.

Have a mobile only accordion (like a city list)

Because of the minimal CSS on this accordion, you can set up things like a city list to no have to repeat, to become an accordion on mobile:

Have a dropdown show by default

If you have a section that you want one of the content to be showing, just add a "showing" class to the .oaClick element, and an inline style for the content "display: block;"