Wishes and Aspirations
- My goal is to design an
.input-groupwith oneinput[type=text]and onebutton[type=button]. - Initially, the text box should be hidden, leaving only the button visible at the center of the page.
- Upon activation, the text box should expand in width in both directions (left and right), while the button slides to the right, creating an animation that seems to be anchored to the center of the
.input-group.
@jakob found this fiddle as a functional example. Using that fiddle and similar ones as references, I have created the following:
Implemented using HTML, CSS, JS, JQuery, and Bootstrap4.
$('document').ready(function() {
$('#search-label').on({
mouseenter: function() {
$('#search-box').stop().animate({
width: '500px',
borderBottom: '3px solid #373A3C'
});
},
mouseleave: function() {
$('#search-box').stop().animate({
width: '0px',
border: 'none'
});
},
click: function() {
$('#search-box').focus();
}
});
$('#search-box').on({
focusin: function() {
$(this).css({
width: '540px',
borderBottom: '3px solid #373ABC'
});
},
focusout: function() {
$('#search-box').stop().animate({
width: '0px',
border: 'none'
});
}
});
});// CSS code goes here
<!DOCTYPE html>
<html lang="en">
<head>
// Head content goes here
</head>
<body>
// Body content goes here
</body>
</html>$('document').ready(function() {
var $label = $('#search-label');
var $searchBox = $('#search-box');
function revealSearchBox() {
$('#search-box').stop().animate({
width: '500px',
borderWidth: '3px',
borderStyle: 'solid',
borderColor: '#373A3C'
}, 400);
}
function hideSearchBox() {
$('#search-box').stop().animate({
width: '0px',
border: 'none'
}, 400);
}
function focusOnSearch() {
$('#search-box').focus().toggleClass('focused');
}
$label.addEventListener('mouseenter', revealSearchBox());
$label.addEventListener('mouseleave', hideSearchBox());
$label.addEventListener('click', focusOnSearch());
});// CSS code goes here
<!DOCTYPE html>
<html lang="en>
<head>
// Head content goes here
</head>
<body>
// Body content goes here
</body>
</html>I have provided the complete code in case any issues arise from my Bootstrap implementation. However, the only relevant elements are #search-bar, #search-box, #search-submit, and #search-label.
If there are any suggestions or corrections to improve the code, I'm open to feedback. Additionally, if there is a better approach than the one I have implemented, I am keen to learn.