jQuery Accordion Shortcode For Blogger!

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:

 

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

image

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

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

14 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Jazak Allah , it can really work for me :)- last time i had to extract code from your a sidebar widget which you posted ...

    ReplyDelete
    Replies
    1. Clever you! ;)

      But I will share all shortcodes in a week and all those surprised shortcodes too

      Delete
  2. bohat lash brother i am waiting for multi video tab please upload as soon as possible i have seen demo such as About Feature
    there are four tab in row please

    ReplyDelete
  3. This is what i mean, master...xixixix :D

    ReplyDelete
  4. After implementing this code I am having one issue. By default the accordion text is showing but the link indicates that the accordion should be closed. Any idea how to fix this?

    ReplyDelete
    Replies
    1. I'm having the same issue as Joey. Any suggestions would be appreciated.

      Delete
  5. Thank you very much. It works!
    But I have a question. Can the code be tweaked to make it mobile responsive?

    ReplyDelete
  6. [item title="Title Of Tab"]Hi on my page no work :( maybe i do something wrong[/item]

    ReplyDelete
  7. thankyou so much bro....but can i add font-awsome icons in item-title?

    ReplyDelete
  8. I'm having problems with the shortcode
    When I use it on the page or widgets ok.
    But shortcode not working inside any posts
    Please Need Quick Help me.

    I have tried to follow the tutorials but still not successful

    topic Dynamically Updated JS File for Blogger Shortcodes Not Working

    ReplyDelete
  9. You guys are the best. JUST AWESOME!!! LOVE IT

    ReplyDelete
  10. I can't make this work. I wonder what's missing. x.x

    ReplyDelete