Ever wondered to create custom jQuery accordions with Toggle effect in blogger using a single line of code? That dream has come true thanks ...
Lets first view a live demo of its UI to see how it works:
How Blogger Accordion UI works?
The UI of our Accordion contains a set of panels. All panel Tabs are visible at all times, but content inside the panels is hidden. When a user clicks the header of the panel, the body content of that panel will become visible and other panel's body contents which was previously visible will become invisible.
For the first time in the history of both Wordpress blogs and Blogger, you can now embed Accordions even inside Blog Comments. The accordion works with both classic and threaded blogger comments form. See the screenshot below
They can also be nested inside another Shortcode Object, take for instance the Multi tabs which we will release in a while. You can insert the accordion shortcode inside the Tabs widget to make it work!
Install Blogger Shortcode Plugin
First and foremost you need to install the Shortcode Plugin by following 7 easy steps shared on the tutorial link below
Add Accordion Shortcode To Blogger
1 Go To Blogger > Template > Backup your template
2 Click Edit HTML
3 Search ]]></b:skin>
4 Paste the following CSS Styles just above it
/*------ Shortcode Accordion -----*/
.sc-accordion > h3 .anchor {
font-family: helvetica;
padding: 3px 7px;
color: #70CF0A;
margin: 0 8px 0 0;
}
.sc-accordion > h3 a {
text-decoration: none;
font: normal 16px oswald;
color: black;
border-bottom: 1px solid #eee;
display: block;
padding: 0 0 0.6em 0;
}
.sc-accordion .trigger {
border-bottom: 1px solid #DDD;
padding: 0 0 0.5em 0;
margin: 0 0 0.5em 0;
display: none;
font-family: arial;
font-size: 14px;
}
.sc-accordion > h3.toggle {
margin: 0 0 0.5em;
}
.sc-accordion > h3 a.active {
border: none;
padding: 0;
}
.sc-accordion > h3 a.active .anchor, .sc-accordion > h3 a.active {
color: #70CF0A;
}
.sc-accordion > h3 a:hover {
color: #70CF0A;
}
- To change the color of font replace #70CF0A with your preferred hexadecimal color. Use our Color Generator tool
- To change The font type replace oswald with your font name
6 Save your template and you are all done!
How to Create Accordion?
Now when you are done with all installation part. It is time to learn how to create toggle accordions and add them inside Posts, widgets and comments.
Creating accordion using its shortcode is extremely easy. You just need to paste the following shortcode where you want the accordion to display:
[accordion]
[item title="Title Of Tab 1"] INSERT CONTENT HERE [/item]
[item title="Title Of Tab 2"] INSERT CONTENT HERE [/item]
[item title="Title Of Tab 3"] INSERT CONTENT HERE [/item]
[/accordion]
Output:
- The above shortcode will create three toggle tabs where [item marks the start of a new panel
- You can insert any HTML, text or even a new shortcode inside the content area represented by INSERT CONTENT HERE
- You can place your headline or title by replacing the text Title Of Tab 1,2,3 etc.
- To create a new tab and panel you just need to add the following sub-shortcode above [/accordion]
[item title="Title Of Tab"]INSERT CONTENT HERE[/item]
Need Help?
You can insert the shortcode anywhere inside your post composer, your template or even inside the TEXT widgets or HTML/JavaScript widgets.
Let me know if you needed any help. Peace and blessings buddies =>
COMMENTS