Birthday

July 14, 2012 is TipRicks's Birthday, Please Prepare and Send Good Wishes to its team!

UnderStood
TipRicks is under maintenance! If you found any error please let us know. Contact Us ×

Hello!

Click one of our representatives below to chat on WhatsApp

Support Customer Service Center
+923084774257
You can also send us an email to support@tipricks.com
Hello! What can I do for you?
×
How can I help you?

Creating Accordion Widgets for Pages and Posts with jQuery

SHARE:

Usually, this widget is used for an FAQ page or blog landing page which is useful for explaining a basic question from a customer.


Hello TipRicks friends, this time I will share a simple tutorial that can be used for all blogger and WordPress platforms. Of course, my friend is familiar with this one widget, the Accordion, which can display and hide certain content in the form of text, images, and so on.

Usually, this widget is used for an FAQ page or blog landing page which is useful for explaining a basic question from a customer and when the question is clicked it will bring up the answer. The design I provide in this tutorial is simple enough to be suitable for all types of blogs that you use.

This widget is useful for friends who have blogs with service themes or blogs that need to show, hide images/video, or other content.

[##eye## Live Preview]

How to Install an Accordion Widget on a Page/Post

The first step, make sure you have the following on the blog template:

  • Font Awesome Version 5
  • Jquery
Please go to Blogger> Templates> Edit HTML 
Place the following CSS code above the code ]]></b:skin>

[/* CSS Accordion */ 
.collapse{display:none}#accordion h3{margin:0}.showx .collapse{display:block} 
.collapse .card-body{padding:10px 25px 40px;color:#555} 
button.btn.btn-link{display:block;background:#fff;border:none;outline:none;width:100%;margin:10px 0;padding:10px 25px;cursor:pointer;text-transform:none;text-align:left} 
button.btn.btn-link:before{content:'\f107';font-family:'Font Awesome 5 Free';font-weight:600;font-size:2rem;color:#122949;position:absolute;left:25px;top:15px;opacity:.7;transform:rotate(-90deg);transition:all .3s ease-in-out} 
.showx button.btn.btn-link:before{transform:rotate(0deg)} 
.card{background:#fff;box-shadow:0 2px 2px 0 rgba(0,0,0,0.1);border:1px solid #eee;border-radius:5px;position:relative;overflow:hidden;margin:10px 0;padding:0 0 0 40px} 
.card-header button h4{font-weight:400;color:#122949;font-size:1.1rem;margin:0} 
#accordion .card-body img{margin:20px auto;border-radius:7px}]

Next, place the following script code above the code </body>

[<script>
//<![CDATA[
// Accordion FAQ
$("#accordion .btn").click(function() {
var get_target = $(this).attr("data-target");
$(get_target).slideToggle("fast");
$(this).parent().parent().toggleClass("showx")
}), 
$(document).ready(function() {
var get_target;
"true" == $("#accordion .btn").attr("aria-expanded") && (get_target = $(this).attr("data-target"), $(get_target).slideToggle("fast"))
});
//]]>
</script>]

Save.
Next, please go to the post editor and enter HTML mode.


If so, make sure you have marked the position to put the Accordion code on the post.
The following is the Accordion code:

[<div id='accordion'>
<!-- ACORD START -->
<div class='card showx'>
<div class='card-header' id='heading1'>
<button aria-controls='collapse1' aria-expanded='true' class='btn btn-link' data-target='#collapse1' data-toggle='collapse'><h4>What is Blogger?</h4></button>
</div>
<div aria-labelledby='heading1' class='collapse' data-parent='#accordion' id='collapse1'>
<div class='card-body'>Blogger is an American blog-publishing service that allows multi-user blogs with time-stamped entries. It was developed by Pyra Labs, which was bought by Google in 2003. The blogs are hosted by Google and generally accessed from a subdomain of blogspot.com. Blogs can also be served from a custom domain owned by the user (like www.example.com) by using DNS facilities to direct a domain to Google's servers.</div>
</div>
</div>
<!-- ACORD END -->
<!-- ACORD START -->
<div class='card'>
<div class='card-header' id='heading2'>
<button aria-controls='collapse2' aria-expanded='true' class='btn btn-link' data-target='#collapse2' data-toggle='collapse'><h4>This product have a guarantee?</h4></button>
</div>
<div aria-labelledby='heading2' class='collapse' data-parent='#accordion' id='collapse2'>
<div class='card-body'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<center><img alt="Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyUjwBq-gSQpQW2gEXqmpEGfCjH7cI2lUsucWkfDxvIApeBcOcmkLLPJF0QUEoIxgL31agIy9QAwGfbADEuzxli6Dbri54zPlhvwhfsX0gdlt-jqcTrVXUz_3WzAXY3-uAxsHEwiyubDp-/s600/tipricks-spike-logo-top-ad.png"/></center></div>
</div>
</div>
<!-- ACORD END -->
<!-- ACORD START -->
<div class='card'>
<div class='card-header' id='heading3'>
<button aria-controls='collapse3' aria-expanded='true' class='btn btn-link' data-target='#collapse3' data-toggle='collapse'><h4>How about the Documentation?</h4></button>
</div>
<div aria-labelledby='heading3' class='collapse' data-parent='#accordion' id='collapse3'>
<div class='card-body'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>
</div>
<!-- ACORD END -->
</div>]

We have marked the parts with <! - ACORD START -> for the prefix and <! - ACORD END -> for the end.

If you want to add more boxes, make sure you change the numbers on the card:

That's the tutorial that I can share this time. If you have questions and assistance, please fill in the comments column. Thank you. 🤩

This article "Creating Accordion Widgets for Pages and Posts with jQuery" is protected by




Was this article helpful?

Thanks! Your feedback will help us to improve our Services.

COMMENTS

BLOGGER
Need help? Contact to our support center at +92 308 477 4257
Name

Agriculture PPT Templates,2,AI Tools,1,Amazon,1,AskTipRicks,9,Blogger,48,Blogger-SEO,6,Blogger-Templates,1,Blogger-Tutorials,32,Blogger-Widgets,11,Blogging-Tips,7,Books,1,Business,1,Computer PPT Templates,1,Computer-Tutorials,1,Creative-PowerPoint-Templates,2,Digital Marketing,1,Domain,1,Ecommerce,1,Facebook,4,Free-Mobile-Data,1,Freenom,1,General,7,Google-Adsense,4,Google-Analytics,2,Google-Classroom,3,Instagram,2,Internet,1,Interviews,1,Islamic PPT Templates,1,jQuery,1,Marketing,1,Medical PPT Templates,1,Microsoft-Word,3,Mobile-Marketing,1,Motivation,1,MS Word,1,News,25,News-Updates,26,Oppo-Mobile-Features,1,PDF,1,PowerPoint-Templates,7,Resume-Templates,2,Reviews,3,SEO,8,Social-Media,6,Tech-News,15,TrueCaller,1,Twitter,1,Videos,24,Vlogging,1,Web-Hosting,1,Whatsapp,3,WordPress,8,WordPress-SEO,1,WordPress-Themes,1,WordPress-Tutorials,4,Youtube,5,
ltr
item
TipRicks Blog: Creating Accordion Widgets for Pages and Posts with jQuery
Creating Accordion Widgets for Pages and Posts with jQuery
Usually, this widget is used for an FAQ page or blog landing page which is useful for explaining a basic question from a customer.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwqkeg20l55klLwQ0XEQGIt8BN8QDwUfNvIe58FRuiyI4QrZMm5EusXgcI9BuQ54LyV4TJmSbF_LISd3b12Lq9swu72pUmd7c4FHjSK_UpNan6sPQAAY0B1KD8gUzzUhnhBnzo1yWo3EIA/w320-h198/creating-accordion-widgets-for-pages-and-posts-with-jquery.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwqkeg20l55klLwQ0XEQGIt8BN8QDwUfNvIe58FRuiyI4QrZMm5EusXgcI9BuQ54LyV4TJmSbF_LISd3b12Lq9swu72pUmd7c4FHjSK_UpNan6sPQAAY0B1KD8gUzzUhnhBnzo1yWo3EIA/s72-w320-c-h198/creating-accordion-widgets-for-pages-and-posts-with-jquery.png
TipRicks Blog
https://blog.tipricks.com/2021/04/creating-accordion-widgets-for-pages-and-posts-with-jquery.html
https://blog.tipricks.com/
https://blog.tipricks.com/
https://blog.tipricks.com/2021/04/creating-accordion-widgets-for-pages-and-posts-with-jquery.html
true
7070217950916442682
UTF-8
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 to a social network STEP 2: Click the link on your social network 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