How can I disaply a row of images upon pressing a button?

Question

I want to be able to press one of the "buttons" as seen on the image below. When the button is pressed, the corresponding section of 3 images would appear/hide. As in, if I press on "Tapas", only the tapas images appear, If I press on "main" only the main images hide/appear.

Here is my HTML code:

 var button = document.querySelector('.load-more-button'); var tapas = document.querySelectorAll('.show-tapas'); button.addEventListener("click", function(e) { tapas.forEach(b => $(b).toggle()); })

 .show-tapas { display: none; }.show-tapas.showing { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <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 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="//via.placeholder.com/150x100"> </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="//via.placeholder.com/150x100"> </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="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> </div> <div class="row"> <div class="col-md-12"> <div class="load-more-button"> <a href="#">Main Courses</a> </div> </div> </div> <div class="col-md-4 col-sm-6"> <a href="images/menu_main_1_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-md-4 col-sm-6"> <a href="images/menu_main_2_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-md-4 col-sm-6"> <a href="images/menu_main_3_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="row"> <div class="col-md-12"> <div class="load-more-button"> <a href="#">Dessert</a> </div> </div> </div> <div class="col-md-4 col-sm-6"> <a href="images/menu_dessert_1_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-md-4 col-sm-6"> <a href="images/menu_dessert_2_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-md-4 col-sm-6"> <a href="images/menu_dessert_3_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> </div> </div>

Answer 1

Using some jquery to do that.

I have some rule in a tag. (attribute img-data-class )

and the row including your image should put your class name.

 function toggleImage(elm){ var _this = $(elm); var _class = _this.attr('img-data-class'); $('.' + _class).toggle(); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <div class="grid-portfolio" id="portfolio"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="load-more-button"> <a img-data-class="show-tapas" onclick="toggleImage(this)" href="#">Tapas</a> </div> </div> </div> <div class="row show-tapas"> <div class="col-xs-4 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="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-xs-4 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="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-xs-4 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="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> </div> <div class="row"> <div class="col-md-12"> <div class="load-more-button"> <a img-data-class="show-main" onclick="toggleImage(this)" href="#">Main Courses</a> </div> </div> </div> <div class="row show-main"> <div class="col-xs-4 col-md-4 col-sm-6"> <a href="images/menu_main_1_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-xs-4 col-md-4 col-sm-6"> <a href="images/menu_main_2_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-xs-4 col-md-4 col-sm-6"> <a href="images/menu_main_3_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> </div> <div class="row"> <div class="col-md-12"> <div class="load-more-button"> <a img-data-class="show-dessert" onclick="toggleImage(this)" href="#">Dessert</a> </div> </div> </div> <div class="row show-dessert"> <div class="col-xs-4 col-md-4 col-sm-6"> <a href="images/menu_dessert_1_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-xs-4 col-md-4 col-sm-6"> <a href="images/menu_dessert_2_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> <div class="col-xs-4 col-md-4 col-sm-6"> <a href="images/menu_dessert_3_1.jpeg" data-lightbox="image-1"> <div class="thumb"> <div class="portfolio-item"> <div class="image"> <img src="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> </div> </div> </div>

Answer 2

Everything is perfect including the function you have created, the only problem is that you haven't wrap the main courses images and dessert images into a div show-tapas-2 and show-tapas-3 and giving their a tag class load-more-button-2 and load-more-button-3

Just like you did it with Tapas images and then you can used the function for each respective content

 var button1 = document.querySelector('.load-more-button'); var tapas1 = document.querySelectorAll('.show-tapas'); button1.addEventListener("click", function(e) { tapas1.forEach(b => $(b).toggle()); }) var button2 = document.querySelector('.load-more-button-2'); var tapas2 = document.querySelectorAll('.show-tapas-2'); button2.addEventListener("click", function(e) { tapas2.forEach(b => $(b).toggle()); }) var button3 = document.querySelector('.load-more-button-3'); var tapas3 = document.querySelectorAll('.show-tapas-3'); button3.addEventListener("click", function(e) { tapas3.forEach(b => $(b).toggle()); })

 .show-tapas { display: none; }.show-tapas.showing { display: block; }.show-tapas-2 { display: none; }.show-tapas-2.showing { display: block; }.show-tapas-3 { display: none; }.show-tapas-3.showing { display: block; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <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 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="//via.placeholder.com/150x100"> </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="//via.placeholder.com/150x100"> </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="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> </div> <div class="row"> <div class="col-md-12"> <div class="load-more-button-2"> <a href="#">Main Courses</a> </div> </div> </div> <div class="row show-tapas-2"> <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="//via.placeholder.com/150x100"> </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="//via.placeholder.com/150x100"> </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="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> </div> <div class="row"> <div class="col-md-12"> <div class="load-more-button-3"> <a href="#">Dessert</a> </div> </div> </div> <div class="row show-tapas-3"> <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="//via.placeholder.com/150x100"> </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="//via.placeholder.com/150x100"> </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="//via.placeholder.com/150x100"> </div> </div> </div> </a> </div> </div> </div> </div>