how to hide then slide left a search box?

Question

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();
  });
});

What element is supposed to slide out? If it is the input, start by removing the `.next()` — AmazingDreams, Aug 09 '13 at 11:34
you want something like that : http://developer.android.com/google/index.html (hover on search icon) — maverickosama92, Aug 09 '13 at 11:34

Martijn · Accepted Answer · 2014-07-11T07:08:35.453

4

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

edited Jul 11 '14 at 07:08

answered Aug 09 '13 at 11:34

Martijn

15,791
4
36
68

I suggest `$(this).prev().animate(...` to make sure no other elements are touched. .. and you just bound this to a submit button. – AmazingDreams Aug 09 '13 at 11:37
Yeah, I was a bit confused on what should be triggered by what. For the example i've added an image as trigger – Martijn Aug 09 '13 at 11:46
If I want the trigger to stay can i just delete this line? $(this).animate({width:0},1000); – MaxwellLynn Aug 09 '13 at 13:02
Yes, I added it for display purposes. You could also add the trigger to the submit button. You would have to change your code a bit, first click-> prevent submit & slide open, 2nd click submit(). – Martijn Aug 09 '13 at 13:04
Also im getting an unknown error on this line, literally have no idea why! $('.search-bar').animate({width:"185px"}, 1000, funtion(){ – MaxwellLynn Aug 09 '13 at 13:11
got a feeling its a queue errors because of the two annimates – MaxwellLynn Aug 09 '13 at 13:12
No, not the two animates. I have way more complex animations than this. I misspelled `function` in that line (missing an C). And you are also giving it `"185px"`, `185` (as int) would suffice. – Martijn Aug 09 '13 at 13:42
yea I just realised lmao.. Thanks for your help martin! – MaxwellLynn Aug 09 '13 at 13:47
NP. An mark as solution would be great :) (and maybe a upvote :P) – Martijn Aug 09 '13 at 14:14

score 3 · Answer 2 · answered Aug 09 '13 at 13:18

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/

how to hide then slide left a search box?

2 Answers2

Update with css3

Linked