Is there a way to showcase a row of images when a button is clicked?

I am looking to create a functionality where pressing one of the buttons shown in the image below will toggle visibility of specific sections containing 3 images each. For example, clicking on "Tapas" will only display tapas images and hide main course images.

Below is the HTML code I have:

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>
.
.
.
(repeat the above structure for dessert section)
.
.
.
  </div>
</div>

https://i.sstatic.net/FxFxu.jpg

javascripthtmljquerycss

Answer №1

Every aspect is flawless, except for the fact that you haven't enclosed the images of the main course and dessert in a div with the classes 'show-tapas-2' and 'show-tapas-3', respectively. Additionally, their anchor tag should have the classes 'load-more-button-2' and 'load-more-button-3'.

You can follow the same pattern used for the Tapas images and then apply the function accordingly to each content section.

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>

Answer №2

Implementing jQuery for this task.

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

and the row containing your image should have your class name.

function toggleImage(element){
  var _this = $(element);
  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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How does Chrome have the capability to access the gist json file? Isn't that typically not allowed?

Fetching a JSON file from Github Gist can sometimes be straightforward, but in certain situations, I have faced difficulties due to CORS restrictions. This has led me to resort to using JSONP instead. Can you shed some light on why this is the case? ...

javascriptajax

Different Methods of Joining Tables in SQLike

Struggling with creating a two-level JOIN in SQLike, currently stuck at the one level JOIN. The source tables are JSONs: var placesJSON=[{"id":"173","name":"England","type":"SUBCTRY"},{"id":"580","name":"Great Britain","type":"CTRY"},{"id":"821","name":" ...

javascriptjsonsqlike

The website is failing to extend and reveal content that is being concealed by jQuery

I'm currently diving into the world of Javascript and jQuery, attempting to create a functionality where upon clicking the submit button, the website dynamically expands to display search information. Although the feature is still in progress, I am ut ...

javascriptjqueryhtmlcss

Incremental migration to Next.js within the current React application

I'm on a quest to uncover practical examples demonstrating the process of gradually transitioning an existing React application towards Next.js. Despite delving into all available Next.js documentation on incremental adoption strategies like subpaths, ...

javascriptreactjsproxynext.jsnetlify

Using jQuery to add the name of a file to FormData and fetching it in a PHP script

I've been working on a JS code snippet dedicated to uploading images based on their file paths: var data = new FormData(); data.append('fileName', fileName); data.append('file', file); $.ajax({ url : dbPath + "upload-file.php" ...

javascriptphpjqueryfile

Tips for managing asynchronous code that invokes other asynchronous code in AngularJs

My factory utilizes indexedDB and a method called getRecipe that relies on this indexed db to fetch data. The issue arises because indexedDB returns its instance in an asynchronous call, and getRecipe is another method that also returns its value asynchro ...

javascriptangularjsasynchronous

Is it possible to configure Nginx to provide HTTPS on port 10000 and implement Basic Auth for an Express app?

My Linux NodeJS/Express application is designed to serve a text file located at http://example.com/secret.txt. I am looking to restrict access to this file only over HTTPS on port 10000 with Basic Auth security measures in place. It's important to no ...

javascriptnode.jslinuxexpressnginx

retrieving data from Redis with the help of Node.js

I'm having trouble with the code snippet below. Despite setting values for the left_label and right_label variables in Redis, they always seem to return as "true". I suspect this is due to the client.get function returning true when successful. How ca ...

javascriptnode.js

translating creates vacant spaces on both sides

I am working with a <div class="scrollable"> that has the CSS property overflow: scroll;. Additionally, I have another <div class="line1"></div> which should not trigger any scrolling on the <div class="scrolla ...

css

Ways to extract information from JSON files

Currently, I am working on a script to extract viewer count and follower count data from Twitch. While I have successfully retrieved the viewer count information, I am encountering issues with extracting the follower count. The essential information can be ...

javascriptjqueryhtmljson

What is the best way to resume a paused animation using JavaScript?

My first game involves triggering an animation that transitions the game screen to greyscale when the character dies. Despite my efforts, I have been unable to successfully trigger this animation using document.getElementById("object").animationP ...

javascriptanimation

Struggling with showcasing database information in HTML using Node.js and Sequelize

In the server.js file, I have the following code: TABLE .findAll({ raw: true }) .then(function(asd) { console.log(asd); }); This code displays all data from my database in the console. Now, my question is: how can I display this data on my website? ...

htmlnode.jssequelize.js

Transferring content from a div class to an input class

I am seeking help to extract text from a div class and transfer it to an input class. Here is the code I have written: import os import time from selenium import webdriver from pyvirtualdisplay import Display from selenium.webdriver.common.by import By fr ...

pythonhtmlseleniumselenium-webdriver

How does the interaction between Express and Angular for routing in the MEAN Stack function?

Currently, I am utilizing Express static to direct to the public directory. //app.js app.use(express.static( __dirname + '/public')); I am looking for a way to have most of the UI routing done by AngularJS. However, it seems that it only works ...

javascriptangularjsnode.jsexpressmean-stack

Displaying a PHP variable on the console through the power of jQuery and AJAX

I'm attempting to display the value of a PHP variable in the browser's console using jQuery and AJAX. I believe that the $.ajax function is the key to achieving this. However, I am unsure about what to assign to the data parameter and what should ...

javascriptphpjqueryajax

Tips for preventing file duplication within a Visual Studio project while managing path problems

Our vendor-created platform is built on asp.net and I am working on creating customizations in the form of web user controls (ascx) that will be integrated into the product. The current structure of my web portion on my development PC looks like this: C: ...

jqueryvisual-studio-2010path

Can you explain the distinction between JQuery and a jQuery Plugin?

There seems to be a bit of confusion around whether it's called simply JQuery or JQuery Plugin. After doing some research, I couldn't find a clear explanation on whether they are the same thing. Can you shed some light on this? ...

jquery

Locating the initial array within a set of nested arrays

One of the functions I'm working on has the ability to generate a nested array, especially for multiPolygon purposes. Here's an example of how it might look: [ [ [ 10.0, 59.0], [ 10.0, 59.0], [ 10.0, 59.0] ], [ [ 10.0, 59.0 ...

javascriptarraysnode.jsturfjs

The scrolling content is positioned beneath the primary header and navigation bar

I'm currently in the process of designing a website where, upon clicking a navigation button, part of the page scrolls while the top header & nav bar remain fixed. Although I've managed to get the scrolling functionality to work and keep the top ...

jqueryhtmlcss

What's the deal with $routeProvider in angularJS?

I'm having some trouble with my simple web app that I'm trying to update using route provider. Everything works fine when I click on the list items on the page, but when I refresh the page, I get a 404 error. It seems like it's trying to acc ...

javascripthtmlangularjs