I want to display an input field .search when clicking on .icon class. I have managed to do that with following code. However instead of show/hide, I want to display the input field by smoothly expanding its width.

How that can be done?

JSFiddle Demo:

/

HTML:

<div class="box">
    <input class="search" type="search" placeholder="Search" />
     <div class="icon"></div>  
</div>

CSS:

.box{
    position: relative;
    width: 220px;
}

.search {    
    width: 200px;
    padding: 5px;
      -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
    float: left;
}


.icon{
    width: 20px;
    height: 20px;
    background: red; 
    position: absolute; 
    right: 0;
}

JS:

$('.icon').click(function() {
    $('.search').toggle();
});

I want to display an input field .search when clicking on .icon class. I have managed to do that with following code. However instead of show/hide, I want to display the input field by smoothly expanding its width.

How that can be done?

JSFiddle Demo:

http://jsfiddle/9nPW9/

HTML:

<div class="box">
    <input class="search" type="search" placeholder="Search" />
     <div class="icon"></div>  
</div>

CSS:

.box{
    position: relative;
    width: 220px;
}

.search {    
    width: 200px;
    padding: 5px;
      -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
    float: left;
}


.icon{
    width: 20px;
    height: 20px;
    background: red; 
    position: absolute; 
    right: 0;
}

JS:

$('.icon').click(function() {
    $('.search').toggle();
});

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Aug 5, 2014 at 12:22 user1355300user1355300 4,9971818 gold badges5050 silver badges7373 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

Why not change your code to toggle a class, thus keeping a clear separation between functionality (JS) and style (CSS)

Below is some sample code, you will likely want to edit for your precise needs.

Demo Fiddle

JS

$('.icon').click(function() {
    $('.search').toggleClass('expanded');
});

CSS

 .box {
    position: relative;
    width: 220px;
}
.search {
    width: 200px;
    max-width:0;
    padding: 5px;
    transition: all .5s ease;
    position:absolute;
    right:20px;
    box-sizing:border-box;
    opacity:0;
}
.search.expanded {
    max-width:200px;
    opacity:1;
}
.icon {
    width: 20px;
    height: 20px;
    background: red;
    position: absolute;
    right: 0;
}

You should use .slideToggle() or fadeToggle()

$('.icon').click(function() {
    $('.search').slideToggle(500);
});