--> jQuery Accordion Shortcode For Blogger! | Experience Lab - Online business creation and development guide for bloggers and startups

jQuery Accordion Shortcode For Blogger!

Ever wondered to create custom jQuery accordions with Toggle effect in blogger using a single line of code? That dream has come true thanks ...

Blogger Accordion ShortcodeEver wondered to create custom jQuery accordions with Toggle effect in blogger using a single line of code? That dream has come true thanks to Blogger Shortcode Plugin that we just published yesterday. You can now add multiple accordions not just on your sidebar widgets but also inside your post body and even inside your blog comments! You can give it any background colors and customize it to your needs. Treat it as a text which can be typed anywhere. Almost anywhere!

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.

Blogger shortcode Accordion

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

embed accordion inside comments

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!

accordion nested inside Tabs widget

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:



[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]




  • 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 =>



Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
Experience Lab - Online business creation and development guide for bloggers and startups: jQuery Accordion Shortcode For Blogger!
jQuery Accordion Shortcode For Blogger!
Experience Lab - Online business creation and development guide for bloggers and startups
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy