Expand the width of the input field smoothly on click
I want to display an input field .search
when clicking on a class .icon
. I managed to do it with the following code. However, instead of show / hide, I want to display the input field by smoothly expanding its width.
How can I do that?
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();
});
+3
source to share
2 answers
Why not change the code to switch the class, thus keeping a clear separation between functionality (JS) and styling (CSS)
Below is some sample code that you probably want to edit for your exact needs.
Demo script
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;
}
+8
source to share