0

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

14th Jan 2017, 8:23 PM
RanjOyHunTer
RanjOyHunTer - avatar
19 Respostas
+ 10
input:active { width:100%; }
14th Jan 2017, 8:59 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 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
14th Jan 2017, 9:19 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 8
Set header width to 0 when expanding.
14th Jan 2017, 8:26 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 8
ā€¦Seems impossible without JSā€¦
14th Jan 2017, 9:06 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 8
JQuery is JS library (it's the sameā€¦ā€¦)
14th Jan 2017, 9:12 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 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 ;)
14th Jan 2017, 10:28 PM
visph
visph - avatar
+ 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 )...
14th Jan 2017, 8:40 PM
visph
visph - avatar
+ 1
visph can I do it without js.. only HTML and CSS?
14th Jan 2017, 8:56 PM
RanjOyHunTer
RanjOyHunTer - avatar
+ 1
valentine it didn't work. I also try header with display none.
14th Jan 2017, 8:58 PM
RanjOyHunTer
RanjOyHunTer - avatar
+ 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>
14th Jan 2017, 9:03 PM
RanjOyHunTer
RanjOyHunTer - avatar
+ 1
it seems like elements that are before can't be accessed by later element
14th Jan 2017, 9:04 PM
RanjOyHunTer
RanjOyHunTer - avatar
+ 1
someone told me to try jQuery
14th Jan 2017, 9:10 PM
RanjOyHunTer
RanjOyHunTer - avatar
+ 1
yeah. they say with just JavaScript it is not possible. told me to use jQuery library.
14th Jan 2017, 9:15 PM
RanjOyHunTer
RanjOyHunTer - avatar
+ 1
Thanks valentine it really works
14th Jan 2017, 9:25 PM
RanjOyHunTer
RanjOyHunTer - avatar
+ 1
thanks vipesh I will keep in mind about the warning
14th Jan 2017, 10:34 PM
RanjOyHunTer
RanjOyHunTer - avatar
+ 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
15th Jan 2017, 8:42 PM
Physics D'alton
Physics D'alton - avatar
+ 1
never mind... we can do more by sharing common ideas
15th Jan 2017, 9:24 PM
Physics D'alton
Physics D'alton - avatar
0
how can I convert a php theme to HTML directly
14th Jan 2017, 10:32 PM
Physics D'alton
Physics D'alton - avatar
0
hi Dalton. I haven't learn much to be considered partner šŸ˜ŒšŸ˜ŒšŸ˜Œ
15th Jan 2017, 8:44 PM
RanjOyHunTer
RanjOyHunTer - avatar