CODEWITHSUNDEEP
jqueryhtmlcss
MaxwellLynn
MaxwellLynn

Reputation: 968

how to hide then slide left a search box?

I'm new to Jquery and can't get my head round this.

I have a search icon that when is pressed I want a the search box to slide out to the left but can't get my head round it. Is there any useful tutorials out there or can someone let me know what im doing wrong in my Jquery.

Thanks

HTML:

<div id="search-container">
    <div class="search-bar">
        <input name="ctl00$txtSearch" type="text" id="ctl00_txtSearch" class="searchbox" value="Search" onfocus="this.value=''">                   
    </div>
    <button type="submit" name="ctl00$btnSearch" value="Go" id="ctl00_btnSearch" class="searchbutton search-bg show"></button>                       
</div>

Jquery 

$(document).ready(function() {
   $('#search-container input').click(function() {
   $(this).next().slideToggle();
  });
});

Upvotes: 2

Views: 14445

Answers (2)

Martijn
Martijn

Reputation: 16103

You have to add an image to trigger the slideout (this input is not clickable when hidden :P)

You'll get something like this:

<div class="search-bar">
    <input name="ctl00$txtSearch" type="text" id="ctl00_txtSearch" class="searchbox" value="Search" onfocus="this.value=''">           
</div>
<img src="SomeImage.png" class="trigger"/>

Then give .search-bar{ width: 0; overflow:hidden;}and animate it to normal.

$(document).ready(function() {
    $('#search-container .trigger').click(function() {
        // Hide the trigger image:
        $(this).animate({width:0},1000);
        // At the same time slide the div open
        $('.search-bar').animate({width: 'toggle'},1000, function(){
            // This function/ code will be executed on complete:
            $(this).find('input')[0].focus(); // For bonus, the input will now get autofocus
        });
    });
});

-> jQuery animate documentation (animate instead of slide, slide does not do legt/right, animate can)

Small sidenote for a more global scale:
* form elements dont slide or animate. Add a wrapping div to those.
* The element that scricks in width will make content like a p get all small and weird. Give those a width to prevent that

Update with css3

It's been a while, and there is a (better?) alternative available, css3 transition:

.menu{
    overflow: hidden;
    max-width: 0;
    width: 200px;
    transition: max-width 1s
}
.Opened.menu{
    max-width: 200px; /* Has to be a number, 'none' doesnt work */
}

Combined with jQuery's .toggleClass() this is very easy, and you give some style-control back to css. Tip: Instead of the class, you could also use the :hover

Upvotes: 4

Nilesh Thakkar
Nilesh Thakkar

Reputation: 2895

Check out below code:

HTML

<div id="search">
<img src="https://cdn0.iconfinder.com/data/icons/strabo/24/magnifying_glass.png" class="trigger"/> 
    <div class="search-bar">
    <input name="ctl00$txtSearch" type="text" id="ctl00_txtSearch" class="searchbox" value="Search" onfocus="this.value=''"/>           
</div>
</div>

JavaScript:

$(document).ready(function() {
    $('#search .trigger').click(function(){
        $('.search-bar').animate({width: 'toggle'},1500);
    });
});

CSS:

.search-bar{ width: 200;overflow:hidden; }
.trigger{cursor:pointer;}

Fiddle: http://jsfiddle.net/FdEC5/

Upvotes: 3

Related Questions