Stylish FAQ Accordion Widget For Blogger | jQuery

How to Add jQuery on Blogger Post/Page -  

इस बार jQuery का सरल Tutorial आया हूँ।  जिसका उपयोग सभी Blogger और Wordpress Plateform के लिए किया जा सकता है। इस jQuery का उपयोग आप अपने ब्लॉग या वर्डप्रेस के पोस्ट और पेज में कर सकते हो।  

आमतौर पर jQuery का उपयोग अक्सर पूछे जाने वाले प्रश्न पृष्ठ या ब्लॉग लैंडिंग पृष्ठ के लिए किया जाता है।  जो एक ग्राहक के मूल प्रश्न को समझाने के लिए उपयोगी होता है। और जब प्रश्न पर क्लिक किया जाता है तो यह उत्तर सामने आ जाता है।  

इस jQuery में जो डिज़ाइन प्रदान कर रहा हूँ वह इतना सरल है कि आपके द्वारा उपयोग किए जाने वाले सभी प्रकार के ब्लॉगों के लिए उपयुक्त हो सकता है।  

यह jQuery उन मित्रों के लिए उपयोगी है जिनके पास सेवा विषयों या ब्लॉग वाले ब्लॉग हैं जिन्हें छिपी हुयी छवि/वीडियो सामग्री या अन्य सामग्री दिखाने की आवश्यकता है।  

How to Install Accordion Widget on Pages/Posts - jQuery

jQuery Add first step is to make sure you have the following in your blog template:  

Please go to Blogger > Templates > Edit HTML  

Put 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, put 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>

Next, please go to the post/page editor and go to HTML mode.  

If so, make sure you have marked the position to put the jQuery code on the post. Here is the jQuery code:  

<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>FAQ 1 - Blogger Kya hai?</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.&nbsp;</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>FAQ 2 - Blogger Kaise Kam Karta Hai ?</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.<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_6xP7iwahTcgsJbV_Zg023f7n4-QYp38Ycwda7Q6DrgcvQb9X5tUer7ItFxaCotZdZYJm64Vbcop1sq1CQZOyl86nAi4UQ47f4-9keuzP4rSK504uC0uagWvmriHTNJ10unVhKQ8McA/s2048/tech+gyan.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1152" data-original-width="2048" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_6xP7iwahTcgsJbV_Zg023f7n4-QYp38Ycwda7Q6DrgcvQb9X5tUer7ItFxaCotZdZYJm64Vbcop1sq1CQZOyl86nAi4UQ47f4-9keuzP4rSK504uC0uagWvmriHTNJ10unVhKQ8McA/w320-h180/tech+gyan.jpg" width="320" /></a></div></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>FAQ - 3 How about the Blogger 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>