Search Tab

by Apple Ilagan

HTML

<div id="search">
    <div id="search1"><a href="#" class="thelink" target="1">SEARCH THIS SITE</a>
    </div>
    <div id="search2"><a href="#" class="thelink" target="2">SEARCH FOR AN AGENT</a>
    </div>
    <div id="search3"><a href="#" class="thelink" target="3">SEARCH FOR PROPERTIES</a>
    </div>
    <div class="searchc showme" id="searchc1">
        <div class="hform">
             <h3>Search</h3>

            <form>
                <select class="pin big">
                    <option>Select City</option>
                </select>
                <select class="pin big">
                    <option>Property Type</option>
                </select>
                <select class="bed small">
                    <option>Beds</option>
                </select>
                <select class="bath small">
                    <option>Bath</option>
                </select>
                <select class="tag small">
                    <option>Min. Price</option>
                </select>
                <select class="tag small">
                    <option>Max. Price</option>
                </select>
                <input type="submit" value="Search">
            </form>
        </div>
        <!--searchc1-->
    </div>
    <div class="searchc" id="searchc2">
        <div class="hform">
             <h3>Search</h3>

            <form>
                <input type="text" value="First Name" class="mediumbig dropname">
                <input type="text" value="Last Name" class="mediumbig dropname">
                <select class="mediumbig pin">
                    <option>City of Interest</option>
                </select>
                <select class="mediumbig pin">
                    <option>Language Spoken</option>
                </select>
                <input type="submit" value="Search">
            </form>
        </div>
        <!--searchc2-->
    </div>
    <div class="searchc" id="searchc3">
        <div class="hform">
             <h3>Search</h3>

...

CSS

#search {
    width:1067px;
    height:115px;
    margin:0 auto;
    position:relative;
}
#search1 {
    width:350px;
    height:21px;
    background:#ccc;
    overflow:hidden;
    position:absolute;
    margin:0;
    padding-top:8px;
    font-size:18px;
    text-align:center;
}
#search2 {
    width:368px;
    height:21px;
    background:#ddd;
    overflow:hidden;
    position:absolute;
    margin-left:350px;
    padding-top:8px;
    font-size:18px;
    text-align:center;
}
#search3 {
    width:336px;
    height:21px;
    background:#aaa;
    overflow:hidden;
    position:absolute;
    margin-left:730px;
    padding-top:8px;
    font-size:18px;
    text-align:center;
}
a.activebtn {
    color:#ffa4ec;
}
.searchcontent {
    width:1067px;
    height:57px;
    position:relative;
}
.searchc {
    width:1067px;
    height:50px;
    position:absolute;
    overflow:hidden;
    display:none;
    padding-top:7px;
    margin-top:29px;
}
#searchc1 {
    background:#ccc;
}
#searchc2 {
    background:#ddd;
}
#searchc3 {
    background:#aaa;
}
.showme {
    display:block;
}
.hform {
    padding:10px;
}
.hform h3 {
    float:left;
    width:32px;
    height:32px;
    text-indent:-99999px;
    background:url(images/search.png) top no-repeat;
}
.bath {
    background:#fff url(images/bath.png) top left no-repeat;
}
.bed {
    background:#fff url(images/bed.png) top left no-repeat;
}
.pin {
    background:#fff url(images/pin.png) top left no-repeat;
}
.tag {
    background:#fff url(images/tag.png) top left no-repeat;
}
.dropname {
    background:#fff url(images/dropname.png) top left no-repeat;
}
.hform input[type=text], .hform input[type=email], .hform select {
    margin-top:0;
    width:100px;
    float:left;
    border:none;
    padding:5px 2px;
    margin:0 8px 0 0;
}
.hform input.small[type=text], .hform input.small[type=email] {
    width:125px;
    float:left;
    padding-left:25px;
}
.hform select.small {
    width:125px;
    float:left;
    padding-left:25px;
}
.hform...

JavaScript

jQuery(function () {
    jQuery('.thelink').click(function (e) {
        var index = $(this).parent().index(),
            newTarget = jQuery('.searchc').eq(index);
        jQuery('.searchc').css("zIndex", "9").not(newTarget).fadeOut('fast')
        newTarget.css("zIndex", "999").delay('fast').fadeIn('fast')
        jQuery(".thelink").removeClass("activebtn");
        jQuery(e.currentTarget).addClass("activebtn");
        return false;
    })
});