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, how to create and add CSS accordion content toggle widget in Weebly site.
Add Accordion Content Toggle Widget
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 customization easy with CSS. The widget contains three elements for each accordion block – heading, an arrow and body content. You can control all the elements of the widget through simple CSS and customize as per your need. Basically, we have used list with input type as checkbox to control the behavior of the accordion.
The CSS accordion will look something like below and you can view the live widget in action 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, we have used lightgreen as heading background color with font-size 20px and weight 500. You can customize these parameters to suit your site’s theme and layout. Similarly, the body of the accordion uses lightgrey color for the background with font-size as 16px. You can also customize this 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 add the CSS under “Settings > SEO > Header Code” section or to the “main.less” file without the <style>…<style> tags for the accordion to be effective at site level.
HTML for 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. We have highlighted each block 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">▲</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">▲</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">▲</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">▲</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
One of the main advantages of CSS accordion is that you can prepare the content offline and copy/paste it on the Weebly editor. You can easily correct the sequence offline, add any additional code to control the behavior and style of the accordion. As mentioned above, you can modify the background color, font-size, weight, margin and padding of the heading and body in CSS to match your site’s theme.
8 Comments
Leave your reply.