Web Guidelines
Accordion
The accordion we use is based on the Divi theme default. Colors and typography can be modified in the Divi module settings as long as they meet brand guidelines. The Divi CSS included below is included to define the structure and styling of the accordion Divi module. Border, background, and typography styling may be modified via the Divi module settings.
Example
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
CSS
The Divi CSS included to reference and is not intended to be modified.
/* Open accordion module */
.et_pb_toggle_open {
padding: 20px;
background-color: #fff;
}
/* Closed accordion module */
.et_pb_toggle_close {
background-color: #f4f4f4;
padding: 20px;
}
/* Accordion content */
.et_pb_toggle_content {
padding-top: 20px;
position: relative;
}
/* Accordion container */
.et_pb_toggle {
border: 1px solid #d9d9d9;
}
/* Accordion title */
.et_pb_accordion.et_pb_text_align_left .et_pb_toggle_title,
.et_pb_accordion.et_pb_text_align_left h5.et_pb_toggle_title,
.et_pb_accordion .et_pb_toggle.et_pb_text_align_left .et_pb_toggle_title,
.et_pb_accordion .et_pb_toggle.et_pb_text_align_left h5.et_pb_toggle_title,
.et_pb_toggle.et_pb_text_align_left .et_pb_toggle_title,
.et_pb_toggle.et_pb_text_align_left h5.et_pb_toggle_title,
.et_pb_toggle .et_pb_toggle_title,
.et_pb_toggle h5.et_pb_toggle_title {
cursor: pointer;
position: relative;
padding: 0 50px 0 0;
}
.et_pb_toggle_close .et_pb_toggle_title,
.et_pb_toggle_close h5.et_pb_toggle_title {
color: #666;
}
.et_pb_toggle_open .et_pb_toggle_title,
.et_pb_toggle_open h5.et_pb_toggle_title {
color: #333;
}