September 26, 2014

Weebly Tricks #76 - Question and Answer Accordion Widget

Posted by Domingo Tambasacan at 9/26/2014

FAQ 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.








FILES NEEDED
How to use these files? Click Here!


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

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



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!

...

8 comments:

  1. Hi,
    I've tried your accordion, but they stay expanded.
    Do you have tips for me?
    http://evolugolf.weebly.com/abonnements.html#
    Thanks
    Vincent

    ReplyDelete
    Replies
    1. Please use the forum for proper support. Thanks.

      Delete
  2. I have the same problem. To find out solution, i join to your forum by giving my email id. I confirm it also in my email. When i click on member area, it is asking me passward !
    It was not earlier created as your system is not asking to create passward.
    Now what: how would you like to help me - or give me answer in my email. my email id staarts with : vijaydave255@.........

    ReplyDelete
    Replies
    1. Hi,

      Please use the forum for questions. Thank You.

      Delete
  3. Hi Domingo, I have the same problem, I subscribed but when i try to access the forum i am asked a password after I click on "Click here for members". I wanted to find out if it was possible to add a + sign (which becomes a - when expanded) and another level that expands when clicked on.

    ReplyDelete
    Replies
    1. Sorry, but this tutorial is only limited to how it was created. I may add later those with Plus and Minus signs.

      Delete
  4. Hi Domingo, I have the same problem, I subscribed but when i try to access the forum i am asked a password. I wanted to find out if it was possible to add a + sign (which becomes a - when expanded) and another level that expands when clicked on.

    ReplyDelete
    Replies
    1. Thanks, how about adding one more expandable level, can that be easily added or it would require a different coding?

      Delete

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top