Weebly Tricks #76 - Question and Answer Accordion Widget

Does your site have a FAQ section? If you have one, why not try to add a simple effect making it even better. This tutorial will help us create a professional looking Frequently Asked Questions area using less style but retaining the effect with JQuery.

CLICK HERE FOR LIVE DEMO

---

FILES NEEDED
How to use these files? Click Here!

---

• jquery.magic-accordion.min.js

---

FOOTER CODE
Where to place these codes? Click Here!

---

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/jquery.magic-accordion.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.content').magicAccordion({
headingTag : 'h2',
bodyClass : 'body',
headClass : 'head',
activeClass : 'active',
speed : 200,
easing : 'swing'
}).on( 'opened.magic', function(e){
console.log(e.head);
}).on( 'closed.magic', function(e){
console.log(e.body);
});

var app = $('.content').data( 'magic-accordion' );
$('.unbind').click( function(e) {
e.preventDefault();
app.unbind();
});
$('.rebind').click( function(e) {
e.preventDefault();
app.rebind();
});
});
</script>

Note:
Red text - Change with your site address.

---

BODY CODE
Where to place these codes? Click Here!

---

<div class="content">

    <h2>What is My Weebly Tricks?</h2>

    <p>My Weebly Tricks is a tutorial site intended for Weebly users and designers.</p>

    <h2>How much does it cost?</h2>

    <p>I offer free support for my subscribers.</p>

    <h2>Are the scripts free?</h2>

    <p>Each code has details on their demo page. All of my tutorials is free to use and apply on your site. But I recommend you to visit the code source somehow.</p>

    <h2>What browsers should I use?</h2>

    <p>It is and always recommended to use the latest version of your browser. I didn't make the codes, I'm simply teaching you on how to exactly insert it on your Weebly template. Browser issues can only be solved by the one who created the code.</p>

</div>

Notes:

Green text - These are your sample questions (or titles) enclosed with <h2></h2>.

Blue text - These will be the answers enclosed with <p></p>.

---

CONCLUSION

---

You can also customize your question's appearance (height, color, format). You can post on the forum if you want more help.

This tutorial uses on of the "10 Capsulated Tips".

Get email updates and more access! (Free)

Email *

email marketing by activecampaign

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!