How to hide the advanced search form using CSS and HTML? - html

Question

So I came across with this awesome Search Form. Demo can be found here.
I was trying to figure how to hide the advanced search box as following:
It does not have to be an error but some button so if the user clicked on it, it will expand the advanced search. I can't seem to figure out how to do it.
The simplified code:
<div class="s009">
<form>
<div class="inner-form">
<div class="basic-search">
<div class="input-field">
<b-form-input v-model="search_text" id="search" placeholder="Type Keywords"></b-form-input>
<div class="icon-wrap">
<svg class="svg-inline--fa fa-search fa-w-16" fill="#ccc" aria-hidden="true" data-prefix="fas" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
</svg>
</div>
</div>
</div>
<div class="advance-search">
<span class="desc">ADVANCED SEARCH</span>
</div>
</div>
</form>
</div>
Is it possible to suggest some CSS/HTML solution for that?

Answer 1

Give us more information.
If you want just hide the advanced search box use this below code
.advance-search
{
display: none;
}
With jQuery
You can use jquery.this code works if you use add jQuery in your html file
$('document').ready(() => {
$('button').on('click', function () {
$('.advance-search').css('display', 'none')
})
})

Answer 2

This answer should suffice. They use the adjacent sibling selector to create "buttons" out of spans in focus. For your code it would look like this.
<div class="s009">
<form>
<div class="inner-form">
<div class="basic-search">
<div class="input-field">
<b-form-input v-model="search_text" id="search" placeholder="Type Keywords"></b-form-input>
<div class="icon-wrap">
<svg class="svg-inline--fa fa-search fa-w-16" fill="#ccc" aria-hidden="true" data-prefix="fas" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
</svg>
</div>
</div>
</div>
**** <span class="show">Show</span>
**** <span class="hide">hide</span>
<div class="advance-search">
<span class="desc">ADVANCED SEARCH</span>
</div>
</div>
</form>
</div>
and the css
span.show:focus ~ .advance-search{ display: none;}
span.hide:focus ~ .advance-search{ display: block;}
addition two
Initially I was trying to do this with only html/css as per your question, however you commented about using Vue. So there are three things to note with vue:
you can store component states in data
you can show and hide elements with v-if
you can change component states on events with v-on
So you want to store data show-advanced: false, then set v-if='show-advanced' on the advance-search. With this advance-search won't display unless show-advance is set to true
<div class="advance-search" v-if='show'>...</div>
<script>
new Vue({
...
data: {
'show': false
}
...
})
</script>
To create a toggle you need a button with the attribute v-on:click="show=!show".
<button v-on:click="show=!show">Toggle</button>
Put that button where ever you want and there you go!
edit
I got a fiddle working, changed show-advanced to show, and I fixed a mistake changing v-bind to v-on