New course! Every coder should learn Generative AI!
Try a free lesson0
How to expand search bar and hide other elements at same time?
I am trying to make a search bar along with a header in one line. When I focus on the search bar I want it to expand full width and hide the header. I can expand the search bar but can't hide the header. The header h1 holds website name. And then comes div element. inside div input of type text is put in. Again the question is I want my input to go 100% width on focus and to hide h1 at the same time. I can achieve the first one but I'm having trouble with the second one
19 Answers
+ 10
input:active {
width:100%;
}
+ 10
function hide(){document.getElementsByClassName("header")[0].style.display="none";}
function show(){document.getElementsByClassName("header")[0].style.display="inline";}
call hide() onfocus (input) and show() onblur
+ 8
Set header width to 0 when expanding.
+ 8
…Seems impossible without JS…
+ 8
JQuery is JS library (it's the same……)
+ 3
@RANJOY KONSAM wrote:
"it seems like elements that are before can't be accessed by later element"
Unfortunaly, yes :(
Some hack for select SAME element previous with :nth-child selector, but in your case, don't work...
However, if we cannot access previous element, we can try to put <h1> after <input> ( which don't need a problematic wrapper for my soluce ), and display it before ( left ), with use of css 'float' property :)
Well so, it require some adjustements:
- to later can set with of <h1> to zero, we need to have a fixed size previously defined ( neither relative unit or 'auto' )
- <h1> margin to zero ( default margin depends on browsers ): if you want a margin, set it to the all header wrapper
- due to the float element, the <input> cannot be vertical aligned automatically, so we need to fix a margin-top...
- finally we can improve the <h1> hiding: we can animate the transition of the width, instead of brutally set the display to none:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.search, .header { transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; }
.header { width:200px; display:inline; float:left; overflow:hidden; margin-top:0; }
.search { width: 150px; margin-top:10px; margin-left:5px;}
.search:focus{ width: 100%; margin-left:0; left:0; }
.search:focus+.header{ width:0; }
</style>
</head>
<body>
<input type="text" class="search" name="search" placeholder="search...">
<h1 class="header">myWebsite</h1>
</body>
</html>
Default of this method is the fixed size: it can be problematic with text display which can never be predict of exact size required. So, you'll be advice to avoid real text element for this kind of case, and use pictures instead ;)
+ 2
var e = document.getElementById('id_element');
e.style.display = 'none'; /* hide element without keeping its space */
e.style.display = ''; /* retrieve declaration is the simplest way to get initial value, without knowing if block, inline or whatever was */
Access to styles properties by this way, set and unset inlining css rules ( rules embeded in 'style' attribut of the element tag ): this is one of reasons to avoid inline style in Html source ^^ ( or intentionnally, as need of specials behaviours )...
+ 1
visph can I do it without js.. only HTML and CSS?
+ 1
valentine it didn't work. I also try header with display none.
+ 1
velentin here's my code
<style>
.header, div, .search{ display: inline; }
.search{ width: 150px; transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; }
.search:focus{ width: 100%; }
.search:focus .header{ display: none; }
</style>
</head>
<body>
<h1 class="header">myWebsite</h1>
<div>
<input type="text" class="search" name="search" placeholder="search...">
</div>
+ 1
it seems like elements that are before can't be accessed by later element
+ 1
someone told me to try jQuery
+ 1
yeah. they say with just JavaScript it is not possible. told me to use jQuery library.
+ 1
Thanks valentine it really works
+ 1
thanks vipesh I will keep in mind about the warning
+ 1
set the header with to null and expand the whole thing
Ranjoy link me my platforms and let's do more partnership
email : daltcom99@gmail. com
whatsapp: +233547459841
+ 1
never mind... we can do more by sharing common ideas
0
how can I convert a php theme to HTML directly
0
hi Dalton. I haven't learn much to be considered partner 😌😌😌
Often have questions like this?
Learn more efficiently, for free:
Hot today
USING HTML ONLY!!!
5 Votes
Effects on HTML and JavaScript
0 Votes
Programming sickness
3 Votes
Help. Помогите пожалуйста
1 Votes
Strange narrowing conversion error from FLTK Color to Color Struct, Stroustrup's header Graph.h
0 Votes
Izzy the iguana
0 Votes