Is it feasible to have two input bars next to each other and keep one open until the other is clicked, then the first one closes as well? I attempted using a transition with "autofocus," but the bar ends up closing when clicked on in my site.
If anyone can implement this functionality using JavaScript, that would be greatly appreciated!
Need some assistance?
HTML:
<div id='Sidebar'>
<div id='SMBar'>
<div id="input-bars">
<!-- SEARCH BAR -->
<div id="SearchBar">
<form id="tfnewsearch" method="get" action="URL">
<input type="text" class="search-text-input" placeholder="Search Posts..." name="q" />
</form>
<div class="tfclear"></div>
</div>
<!-- EMAIL BAR -->
<div id="FollowByEmail1">
<form action="URL" method="post" target="popupwindow" onsubmit="window.open('URL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>
<input autofocus="autofocus" class="follow-by-email-address" placeholder="Updates by Email..." type="text" name="email" />
</p>
<input type="hidden" value="" name="uri" />
<input type="hidden" name="loc" value="en_US" />
</form>
</div>
</div>
</div>
CSS:
#Sidebar {
width: 270px;
border: 1px solid transparent;
height: 500px;
}
#SMBar {
border: 1px solid transparent;
margin: 5px;
height: 405px;
}
#input-bars {
border: 1px solid transparent;
margin: 5px;
height: 30px;
}
input {
height: 25px;
font-size: 14px;
font-family: Play;
padding-left: 30px;
width: 0px;
transition-property: width;
transition-duration: 1s;
background-repeat: no-repeat;
border-radius: 5px;
border: 1px solid black;
outline: none;
box-shadow: 0px 0px 9px #dddddd;
-moz-box-shadow: 0px 0px 9px #dddddd;
-webkit-box-shadow: 0px 0px 9px #dddddd;
}
input:focus {
width: 170px;
box-shadow: 0px 0px 4px #000000;
-moz-box-shadow: 0px 0px 4px #000000;
-webkit-box-shadow: 0px 0px 4px #000000;
}
.follow-by-email-address {
background-image: url(http://imageshack.com/a/img703/8868/iavu.png);
padding-left: 30px;
margin: -12px 0px 0px 2px;
float: left;
}
.search-text-input {
background-image: url(http://imageshack.com/a/img34/9278/cw35.png);
padding-left: 30px;
float: right;
margin: 0px 2px 0px 0px;
}