Accordions are popular because they allow developers to force large amounts of content into tiny spaces on the page. Granted these content displays also require dynamic effects for switching between page elements – so there are pros and cons to accordions. An “Accordion” gives you a great way to display a lot of content in a limited space. Each Accordion item expands to display more content as you click on the plus sign. This allows users to see only the items they want to see. Here is what Accordion items typically look like when first displayed on your site. The Views Accordion module makes the results of the view into an accordion, but not the exposed filters. You can add selection filters by checking the 'Expose this filter' checkbox on filter fields.

Learn how to create an accordion (collapsible content).

Accordion

Accordions are useful when you want to toggle between hiding and showing large amount of content:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Create An Accordion

Accordiondisplay top content on your website page

Step 1) Add HTML:

Example

<button>Section 1</button>
<div>
<p>Lorem ipsum...</p>
</div>
<button>Section 2</button>
<div>
<p>Lorem ipsum...</p>
</div>
<button>Section 3</button>
<div>
<p>Lorem ipsum...</p>
</div>

Step 2) Add CSS:

Style the accordion:

Example

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}

Step 3) Add JavaScript:

Example

Try it Yourself »

Animated Accordion (Slide Down)

To make an animated accordion, add max-height: 0, overflow: hidden and a transition for the max-height property, to the panel class.

Then, use JavaScript to slide down the content by setting a calculated max-height, depending on the panel's height on different screen sizes:

Example

Accordiondisplay top content on your website hosting

Try it Yourself »

Add Icons

Add a symbol to each button to indicate whether the collapsible content is open or closed:

Example

Accordiondisplay Top Content On Your Website Domain

.accordion:after {
content: '02795'; /* Unicode character for 'plus' sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.active:after {
content: '2796'; /* Unicode character for 'minus' sign (-) */
}

Accordiondisplay Top Content On Your Website Hosting

Try it Yourself »

Accordion

Create An Accordion

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

Step 3) Add JavaScript:

Example

Animated Accordion (Slide Down)

Example

Add Icons

Example

Accordiondisplay Top Content On Your Website Domain

Accordiondisplay Top Content On Your Website Hosting

Accordiondisplay Top Content On Your Website Builder