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.

Weebly CSS Accordion Widget

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.

Related:  3D CSS Press Buttons Widget for Weebly Site

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.

Related:  How to Customize Your Theme in Weebly?

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.

Recommended Articles:

8 thoughts on “CSS FAQ or Accordion Widget for Weebly Site”

  1. I’m having trouble with inserting more than one accordion HTML on a page. The 2nd “Embed Code” box with an accordion in it doesn’t toggle down. When the arrow is pushed on that 2nd box, the 1st accordion box opens. I’m hoping I can have more than 1 accordion on the page. As you can see I’m using this for class descriptions and will have several major subject areas. Thank you!

    Reply
  2. Hello, thank you for this very helpful guide. One question I have is how do I edit the font color of the heading? I have tried changing all to #ffffff for example, and even added: font-color: #ffffff on the CSS coding under the heading but the text is always colored grey.

    I have also tried changing it on the html section but no luck

    Thank you!
    Anthony

    Reply
    • Please add “color: #ffffff;” to the .accordion-heading class (under heading style section). It will change the color to white.

      Reply
      • Thank you for your reply. This helps a lot and it works now. Another query I wanted to ask if possible is how can i make the header color style different, i.e. use more than one color for each header similar to this post that you guys made:

        https://www.webnots.com/add-jquery-accordion-content-slider-in-weebly/

        I wanted to create something similar in terms of having the ability to color code each heading. Might this be possible?

        Thank you very much in advance again.

        Anthony

        Reply
        • This one is simple accordion with same heading color, this will not support multicolour heading unless the code is modified to large extent.

          Reply
  3. How can this be used to give drag and drop functionality within the accordion?

    The Weebly accordion has this ability, as do some other 3rd party accordions. I am using the designer platform and the Weebly apps are not available for sites using designer platform. Is there a way to add DD functionality to the above example?

    Many thanks

    Gary

    Reply

Leave a Comment