On Click Example

Show and hide a Search Box on the click of a link

by nickywaites

HTML

<div>
    <a href="#" class="check_in"> Check</a>
    <div id="check_box">
        <form method="post" action="/ucheck/">
            <label ><i>Name</i>
                <input type="text" name="name" id="name" /></label>
            <input type="submit" value="check "/>
        </form>
    </div>
</div>

<div id="mainbody" >
    <table>
        <tr align="left" >
            <td><input type="radio" name="property" id="rdRent" value="rent" checked="true" /><span class="lbltext" >Rent&nbsp;&nbsp;</span></td>
            <td><input type="radio" name="property" id="rdBuy" value="buy"/><span class="lbltext"> Buy&nbsp;&nbsp;</span></td>
            <td><input type="radio" name="property" id="rdHotels" value="hotels"/><span class="lbltext">Hotels&nbsp;&nbsp;</span></td>
            <td><input type="radio" name="property" id="rdPG" value="pg"/><span class="lbltext"> PG&nbsp;&nbsp;</span></td>
        </tr>
        <tr>
            <td>
                <!-- Other things of form -->
                
                <input type="submit" value="SEARCH" />
            </td>
        </tr>
    </table>
</div>

JavaScript

//Show and hide a Search Box on the click of a link
$(document).ready(function() {

    $(".check_in").click(function() {
        $("#check_box").show();
        return false;
    });
    $("#mainbody").click(function() {
        $("#check_box").hide();
    });
})