CSS FAQ or Accordion Widget for Weebly Site

Accordion widget allows you to add large content in a limited space and the interested users can expand the title to view the corresponding content. In our previous article we had discussed on how to use free accordion app offered by Weebly from the App Center along with some customization options. In this article let us discuss the CSS accordion widget for Weebly site.

How to Add CSS FAQ or Accordion Widget in Weebly?

Though accordions are popular using jQuery user interface widget, it is also possible to make an accordion using CSS without script. This helps the page to load faster and makes the customizations easy with CSS. The widget contains three elements for each accordion block – heading, an arrow and body content. All the elements are controlled through simple CSS and can be customized as per your need. Basically list with input type as checkbox is used to control the behavior of the accordion.

The CSS accordion will look something like below and you can view the live demo here.

CSS for Accordion Widget

Copy the below CSS code and paste in the “Header Code” section under “Pages > Select the Page > SEO Settings” of the page on your Weebly site. In order to make the understanding easy, we have highlighted the heading and body style with comments. For example, lightgreen is used as the heading background color with font-size 20px and weight 500 which can be customized to suit your site’s theme and layout. Similarly, lightgrey color is used for the background color for the body of the accordion with font-size as 16px which can also be customized as per your need.

<style>
/* Heading Style Start */ 
.accordion-heading {
background-color: lightgreen;
display: block;
padding: 10px;
position: relative;
cursor: pointer;
font-size: 20px;
font-weight: 500;
}
/* Heading Style End */ 

/* Body Style Start */
.accordion-body {
max-height: 0;
margin-bottom: 2px;
overflow: hidden;
font-size: 16px;
line-height: 1.5;
text-align: justify;
background-color: lightgrey;
transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out;
}
/* Body Style End */

.accordion {
border: 1px solid white;
margin: 0 auto;
list-style: none;
overflow: hidden;
}

.accordion > * + * {
border-top: 1px solid white;
}

.accordion-input:checked ~ .accordion-body {
background-color: lightgrey;
padding: 10px;
max-height: 1000px;
transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in;
}

.accordion-input:checked ~ .accordion-heading > .accordion-heading-btn {
transform: rotate(0);
}

.accordion-heading-btn {
display: block;
width: 30px;
position: absolute;
top: 10px;
right: 0;
pointer-events: none;
transition: transform .3s ease;
transform: rotate(-180deg);
text-align: center;
font-size: 14px;
line-height: 1;
}

.accordion-input { 
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1;
overflow: hidden;
position: absolute;
left: -9999px;
}
</style>

You can also the CSS under “Settings > SEO > Header Code” section or to the “main_style.css” file without the <style>…<style> tags for the accordion to be effective at site level.

HTML for the Accordion

Copy and paste the below HTML code inside an “Embed Code” element on the page you want to add CSS accordion. Replace the headings and body content as you need. Each block is highlighted with comment and you can copy/paste the block to add additional blocks for your accordion.

<div>
<ul class="accordion">
<!-- First Block of Accordion Start -->
<li>
<input class="accordion-input" type="checkbox" name="accordion" id="item1" />
<label for="item1" class="accordion-heading">This is a first heading...<span class="accordion-heading-btn">&#9650;</span></label>
<div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis.
</div>
</li>
<!-- First Block of Accordion End -->
<li>
<input class="accordion-input" type="checkbox" name="accordion" id="item2" />
<label for="item2" class="accordion-heading">This is a second heading...<span class="accordion-heading-btn">&#9650;</span></label>
<div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis.
</div>
</li>
<li>
<input class="accordion-input" type="checkbox" name="accordion" id="item3" />
<label for="item3" class="accordion-heading">This is a third heading...<span class="accordion-heading-btn">&#9650;</span></label>
<div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis.
</div>
</li>
<li>
<input class="accordion-input" type="checkbox" name="accordion" id="item4" />
<label for="item4" class="accordion-heading">This is a fourth heading...<span class="accordion-heading-btn">&#9650;</span></label>
<div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis.
</div>
</li>
</ul>
</div>

Customizing Options

As mentioned above, the background color, font-size, weight, margin and padding of the heading and body can be modified in CSS to match your site’s theme. You can also add any additional code to control the behavior and style of the accordion.

One of the main advantage of CSS accordion is that you can prepare the content offline and copy/paste it on the Weebly editor. Also if there is a mistake in the sequence, it is easy to correct it.