Data-filter showing nothing by default

Question

i have this code and i wanted him to not show anything unless clicking on the div.By default it shows everything listed but i need it to just show things filtered by click. Any ideas?

<section class="our_services_tow">
    <div class="container">
        <div class="architecture_area services_pages">
            <div class="portfolio_filter portfolio_filter_2">
                <ul>
                    <li data-filter=".enc"><a href=""><i class="fa fa-archive" aria-hidden="true"></i>ENCOMENDAS</a></li>
                    <li data-filter=".format"><a href=""><i class="fa fa-file" aria-hidden="true"></i>FORMATOS FICHEIRO</a></li>
                    <li data-filter=".prazos"><a href=""><i class="fa fa-calendar" aria-hidden="true"></i>PRAZOS</a></li>
                    <li data-filter=".entreg"><a href=""><i class="fa fa-truck" aria-hidden="true"></i>ENTREGAS</a></li>
                    <li data-filter=".pag"><a href=""><i class="fa fa-credit-card" aria-hidden="true"></i>PAGAMENTOS</a></li>
                </ul>
            </div>
            <div class="portfolio_item portfolio_2">
               <div class="grid-sizer-2"></div>
                <div class="single_facilities col-sm-7 enc">
                    <div class="who_we_area">
                        <div class="subtittle">
                            <h2>blablabla</h2>
                        </div>
                        <p>blablabla</p>
                        <p>blablabla</p>

                    </div>

                </div>

                <div class="single_facilities col-sm-7 format">
                    <div class="who_we_area">
                        <div class="subtittle">
                            <h2>Preferência de formatos de ficheiro.</h2>
                        </div>
                        <p>blablabla</p>
                        <p>blablabla</p>

                    </div>

                </div>

Possible duplicate of [Toggle visibility property of div](https://stackoverflow.com/questions/18050761/toggle-visibility-property-of-div) — Tom, Jun 01 '18 at 14:04

score 0 · Answer 1 · answered Jun 01 '18 at 14:02

0

make the div hidden using css so it would load up hidden, make another div to have onclick() event(why div? you can use a button) to call a JavaScript function and display the div that is hidden using that function

answered Jun 01 '18 at 14:02

SomethingCool

303
2
20

Data-filter showing nothing by default

1 Answers1