i want search box only on the page , rest invisible after clicking inside search box

Question

I want to create a page where if i click inside my searchbox, everything on the page just goes invisible. only logo searchbox and my account button should stay at the top

my website(http://geri.in/unloc/Bootstrap_stockrid/index.html)

Answer 1

you can't do it with only css and html, you need javascript/jquery too.

there an example function that you can use for starting what you want do:

$("#adv-search input").on("focus",function(){
  $("#myCarousel,#text-carousel,.jumbotron").fadeOut();
});
$("#adv-search input").on("blur",function(){
  $("#myCarousel,#text-carousel,.jumbotron").fadeIn();
});

you should add a class to each main container or elements that you want to hide, than replace the class of fadeIn/fadeOut on the above script with it.