Sunday, December 18, 2011

How to create silde down FAQs using jQuery.

This example will show you how to use jQuery in order to generate easy-to-read and eye-pleasing FAQs, with a slide down effect. we are going to apply a “faq” class to the <dl> element so that it do not affect the other definition lists throughout the page. First of all we need to find and hide all the <dd> elements which are children of any <dl> element with the “faq” class. And then we need to add the toggle effect when a user clicks on a definition title so that when the user clicks on the <dt>, the script navigates the DOM to find the next element (which is going to be the relative <dd>), and it toggles it. You can set the motion’s speed to “slow”, “normal” or “fast”.
FAQs using JQuery

Here is built-in javascript file while you created web site with Visual Studio 2010. Put the below to <head>
tag.
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
Otherwise, you can use the following script reference.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Here is CSS in <head> tag.
<style type="text/css">
    .faq
    {
        margin: 30px;
        background: #d7e7ff;
        padding: 30px 50px 0 30px;
        border: 1px solid #92cdec;
    }
    .faq dt
    {
        font-weight: bold;
        padding: 3px 0 15px 0px;
        position: relative;
        cursor: pointer;
    }
    .faq dd
    {
        padding: 0 0 5px 0px;
        position: relative;
        color: #333;
    }
</style>

Here is javascript to add <head> tag.
<script type="text/javascript">
    $(document).ready(function () {
        $('.faq dd').hide();
        $('.faq dt').click(function () {
            $(this).next().slideToggle('normal');
        });
    });
</script>

Here is form tag.
<form id="form1" runat="server">
    <dl class="faq">
        <dt>Q.How can we check if all the validation control are valid and proper?</dt>
        <dd>A.Using the Page.IsValid () property you can check whether all the validation are done.</dd>
        <dt>Q.If client side validation is enabled in your Web page, does that mean server side code is not run.</dt>
        <dd>A.When client side validation is enabled server emit’s JavaScript code for the custom validators. However,
            note that does not mean that server side checks on custom validators do not execute. It does this redundant
            check two times, as some of the validators do not support client side scripting.
        </dd>
        <dt>Q.How do I send email message from ASP.NET?</dt>
        <dd>A.ASP.NET provides two namespace SystemWEB.mailmessage class and System.Web.Mail.Smtpmail class.</dd>
    </dl>
</form>

That's it what you have to do. Well done!

No comments:

Post a Comment