Creating an Accordion Widget For Pages and Posts with jQuery Leatest | Droidnur123

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

What Is Accordion Widget?

Usually, this widget is used for the 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 that I provide in this tutorial is simple enough to be suitable for all types of blogs that you use.

Benefits Of Accordion Widget?

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

HOW TO INSTALL BEAUTIFUL ACCORDION WIDGET ON PAGES/POSTS

The first step is to make sure you have the following in your blog must have a template:

• Font Awesome V 5. xx
• Jquery

Then Please go to Blogger > Next Templates > Edit HTML

Put the following CSS code above the code  ]]></b:skin> Or </style>

/* CSS Accordion by Droidnur*/
.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}

After that, put the following script code above the code </body> Tag

<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 Your Template.

Now, please go to the post editor and go to HTML mode Not Compose Mode.

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

Here is the Accordion code Copy And Past It:

<div id='accordion'>
<!-- CARD 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>
<!-- CARD END -->
<!-- CARD 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'>In hac habitasse platea dictumst. Vivamus eget elementum nibh. Mauris ultrices, arcu et sollicitudin volutpat, massa nisl aliquet leo, non ornare nulla libero in metus. Integer et enim a lacus convallis dapibus.<center><img alt="Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6x8ryGj3HocI76KGizh7qVgujYqmuyrFAWyBXnV9YG7w7QbpsNi3CYDVWu8OTqyS-yTdPj9GNnYtzVg7X8ziDVkaHD1dppUZk3VgcmaxU8TV8lJQFR3daII9cT0TK1l3zEH9YXXLlNww/s400/material+design+ui.png"/></center></div>
</div>
</div>
<!-- CARD END -->
<!-- CARD 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'>Maecenas pulvinar tincidunt ex. Sed ullamcorper suscipit nisi a semper. Ut sed egestas leo. Quisque at ex magna. Sed mollis faucibus mollis. Nunc sed aliquet lectus. Aenean massa neque, iaculis a augue nec, pretium mattis massa.</div>
</div>
</div>
<!-- CARD END -->
</div>

I have marked the parts with <!-CARD START-> for the beginning and <!-CARD END-> for the end. Please Follow

If you want to add a box, make sure you need to change the numbers on the card:

That's the tutorial "Creating an Accordion Widget For Pages and Posts with jQuery ". If you have questions and assistance, please fill in the comments column. Thank you Visit Again

Go to Link