Display row of images only when button is clicked

Question

Could somebody please tell me how to make rows of images appear after clicking an achor tag (preferably) or a button. Basically, as you will see, on line 6 there is an tag, which i would like to be able to press so that 3 photos that are inside would appear. In other words: Normally, the 3 photos are not visible, but once someone clicks on "Tapas", all 3 appear. If the anchor tag is clicked again, the 3 photos get hidden again. If using an for this is not possible, one would work fine aswell. Here is my HTML code:

<div class="grid-portfolio" id="portfolio">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="load-more-button">
                        <a href="#">Tapas</a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-sm-6">
                    <a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1"><div class="thumb">   
                        <div class="portfolio-item">  
                            <div class="image">
                                <img src="images/menu_tapas_1_0.jpeg">
                            </div>
                        </div></div>                  
                    </a>
                </div>
                <div class="col-md-4 col-sm-6">
                    <a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1"><div class="thumb"> 
                        <div class="portfolio-item">
                            <div class="image">
                                <img src="images/menu_tapas_2_0.jpeg">
                            </div>
                        </div></div>
                    </a>
                </div>
                <div class="col-md-4 col-sm-6">
                    <a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1"><div class="thumb">
                        <div class="portfolio-item">
                            <div class="image">
                                <img src="images/menu_tapas_3_0.jpeg">
                            </div>
                        </div></div>
                    </a>
                </div>
            </div>

Thank you very much.., PS I know this code isn't the best, I just don't have the possibility of cleaning everything up right now.

Answer 1

although i thought you should write code by yourself and if you stuck somewhere then you can ask, but if you are stuck from so much time then you can use this code

<style>
        .show-tapas{
            display: none;
        }
        .show-tapas.showing{
            display: block;
        }
    </style>
            <div class="row">
                <div class="col-md-12">
                    <div class="load-more-button">
                        <a href="#">Tapas</a>
                    </div>
                </div>
            </div>
            <div class="row show-tapas">
                <div class="col-md-4 col-sm-6">
                    <a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1"><div class="thumb">   
                        <div class="portfolio-item">  
                            <div class="image">
                                <img src="images/menu_tapas_1_0.jpeg">
                            </div>
                        </div>                 
                    </a>
                </div> 
                <div class="col-md-4 col-sm-6">
                    <a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1"><div class="thumb"> 
                        <div class="portfolio-item">
                            <div class="image">
                                <img src="images/menu_tapas_2_0.jpeg">
                            </div>
                        </div></div>
                    </a>
                </div>
                <div class="col-md-4 col-sm-6">
                    <a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1"><div class="thumb">
                        <div class="portfolio-item">
                            <div class="image">
                                <img src="images/menu_tapas_3_0.jpeg">
                            </div>
                        </div></div>
                    </a>
                </div>
            </div>
    <script>
        var a = document.querySelector('.load-more-button');
        var b = document.querySelector('.show-tapas');
        a.addEventListener("click",function(e){
            e.preventDefault
            b.classList.contains("showing") ? b.classList.remove("showing") : b.classList.add("showing");
        })
    </script>

add style to first hide the row and then add script to show and hide the row.