jQuery Accordion Widget for Weebly Site

The jQuery accordion plugin is offered for free as part of jQuery user interface project. There are many variations and modifications available to this free version and here is one such a version for your Weebly site based on the inputs from Hongkiat.com. This is a colorful widget with each heading has its own color which can be customized through CSS.

How to Add jQuery Accordion Widget in Weebly?

There are three parts for the widget – script, CSS and HTML.

Adding Script

Add the following code under “Footer Code” section of your Weebly page:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$( "#accordion" ).accordion({
autoHeight: false,
navigation: true
});
});
</script>

If you see the accordion is not loading then replace the $ with jQuery in the above script.

Adding CSS

Add the below CSS under “Header Code” section of your Weebly page:

<style>
a {
text-decoration: none;
}
:focus, :active {
outline: 0;
}
#accordion {
width: 100%;
}
#accordion .ui-accordion-header {
background-color: #ccc;
margin: 0px;
}
#accordion .ui-accordion-header a {
color: #fff;
line-height: 42px;
display: block;
font-size: 12pt;
width: 100%;
text-indent: 10px;
text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
}
#accordion .ui-accordion-content {
width: 100%;
background-color: #f3f3f3;
color: #777;
font-size: 10pt;
line-height: 16pt;
box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, .2), inset 0px -1px 0px 0px rgba(0, 0, 0, .4);
}
#accordion .ui-accordion-content > * {
margin: 0;
padding: 20px;
}
#accordion .ui-accordion-content a {
color: #777;
}
#accordion .ui-accordion-header:first-of-type {
background-color: #fa9300;
}
#accordion .ui-accordion-header:nth-of-type(2) {
background-color: #389abe;
}
#accordion .ui-accordion-header:nth-of-type(3) {
background-color: #f87aa0;
}
/* Start Block for Accordion */
#accordion .ui-accordion-header:nth-of-type(4) {
background-color: #a8b700;
}
/* End Block for Accordion */
/* To add additional blocks, add the above block and use nth-of-type(5) and increase the count */
#accordion .ui-accordion-header:last-of-type {
background-color: #b3bec4;
}
#accordion .ui-accordion-header:first-of-type a {
box-shadow: 0px -1px 0px 0px #b85c0f;
}
#accordion .ui-accordion-content:last-of-type {
box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, .2), inset 0px 0 0px 0px rgba(0, 0, 0, .5);
}
</style>

Adding HTML

Now drag and drop an “Embed Code” element and add the following HTML code:

<div id="accordion">
<!-- Start of Block for Accordion -->
<h3><a href=#>Heading 1 of Accordion</a></h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<!-- End of Block for Accordion -->
<h3><a href=#>Heading 2 of Accordion</a></h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<h3><a href=#>Heading 3 of Accordion</a></h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<h3><a href=#>Heading 4 of Accordion</a></h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<h3><a href=#>Heading 5 of Accordion</a></h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
</div>

Adding Additional Blocks in the Accordion

The above example contains five blocks in the accordion. If you want to add additional blocks then you need to add additional code blocks for CSS and HTML.

• In the CSS code, copy the code block between the comments “Start/End Block for Accordion” and paste by modifying the “nth-of-child(4)” to “nth-of-child(5)” which will be the 5th block in the accordion (just above the last block). Each block has a “background-color” attribute which you can change to modify the header color.
• Similarly in HTML, just append the code block between the comments “Start/End of Block for Accordion” just above the last <div> tag.