How to hide the advanced search form using CSS and 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?

`.advance-search { display: none; }` will do it for you. https://prnt.sc/rdhjal — m4n0, Mar 08 '20 at 21:58

score 0 · Answer 1 · 2020-03-08T22:08:25.867

0

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')
        })
})

edited Mar 08 '20 at 22:08

answered Mar 08 '20 at 21:59

Sorry! I meant, I want to add a button that pops out that advanced-search if clicked – vesii Mar 08 '20 at 22:00
With jQuery or without jQuery? – Mar 08 '20 at 22:03
Without. I use Vue if that helps. – vesii Mar 08 '20 at 22:04
OK wait a moment – Mar 08 '20 at 22:08
I think in Vue is different.This mean Vue has special syntax.But let me to implement this with pure JavaScript pure code – Mar 08 '20 at 22:10

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

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

You are awesome! thank you for this detailed explanation. I tried to use that css on my end but it does not hide the css. Can you maybe add the search form to your fiddle? — vesii, Mar 08 '20 at 23:23
i can't quite explain this one yet, but I'll get back to you. https://jsfiddle.net/0sg1jcfz/ — Shane Mendez, Mar 09 '20 at 00:04
If my answer was acceptable I'd appreciate it if you clicked that big grey, soon to be green, check. Thanks! — Shane Mendez, Mar 09 '20 at 21:14

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

2 Answers2

addition two