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>

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

Children can easily access multiple items within a list by using the ul tag

I am struggling with changing the class of ul inside the ul.navigator. I want to change it only when I click on a particular li, but my current approach doesn't seem to be working. Can anyone provide some guidance or assistance? $('.navigator& ...

javascriptjqueryhtmlcsschildren

SVG Mask not functioning properly with SVGs created in Illustrator (in all web browsers)

Alright, let's get to it - I've got a couple of SVGs here. The first one is a blue circle and the second one is a map of the United States. (Both of these were created in Illustrator) Here's what I want to do: I want the map to serve as a ...

htmlcsssvgmasking

Prisma Hack: excluding properties in type generation

EDIT hiding fields in the TypeScript definitions may pose a hidden danger: inaccessible fields during development with intellisense, but accidentally sending the full object with "hidden" fields in a response could potentially expose sensitive data. While ...

javascripttypescriptnext.jsprisma

Unable to transmit the element identifier information through ajax

Whenever I attempt to pass id data through ajax, I encounter an undefined variable error. The ajax function works smoothly with form data, but the issue arises when trying to extract the id value. Below is the PHP/HTML code snippet: <ul class="sub-men ...

javascriptphpjqueryajax

How to resolve the error of "Objects are not valid as a React child" in NextJs when encountering an object with keys {children}

I am currently working on a nextjs application and I have encountered an issue with the getStaticPaths function. Within the pages folder, there is a file named [slug].tsx which contains the following code: import { Image } from "react-datocms"; i ...

javascriptreactjsnext.jsgraphqldatocms

Is there a way to adjust the placement of the h1 tag using the before pseudo-element?

I'm looking to place an image on the left side of each h1 tag. I've been attempting to utilize the before pseudo element for this task. The issue arises when there is no content, causing the before pseudo element to overlap with the h1 tag. How ...

htmlcss

What is the best way to combine a QR code and an existing image using Java script?

Looking for help in embedding a created QR code into an existing image. I am proficient in nodeJS, JavaScript, and jQuery. Any assistance would be greatly appreciated. ...

javascriptjquerynode.jsqr-code

Press the button to update several span elements

Imagine I have multiple span elements like this: <span>A</span> <span>B</span> <span>C</span> <span>D</span> and a div element (which will be converted to a button later) named "change". <div id="chan ...

javascriptjqueryhtmlcss

Modify the parameters of the apps.facebook.com URL using the Facebook API

Is there a way to modify the parameters in the URL for apps.facebook.com using JavaScript? For instance, if a user chooses a photo, can we change the URL to apps.facebook.com/myapp/?photo_id=23234? This would allow the user to easily share the link with a ...

javascriptfacebook

Can the Browser width/document width be maintained when shrinking the browser window size?

https://i.stack.imgur.com/a4gfA.pngLooking for a solution to maintain the browser/document width at 350px, preventing users from minimizing the window. The desired width is actually 400px, not 350px. Please refer to the image above. I require the window ...

javascriptjqueryhtmlcsstwitter-bootstrap

considering multiple website addresses as one collective entity for the Facebook like button

Currently, I am tackling an issue on a website that employs a custom CMS which automatically generates URLs based on the titles of articles. The main problem faced by our contributors is that when they update the title of an article, it creates a new URL ...

javascriptfacebook-like

What is the best way to create a fixed footer in Next.js using React?

I'm looking to create a fixed footer that will stay at the bottom of the page if there isn't enough content to fill it. I've been researching ways to achieve this using CSS, but many of the methods don't easily translate to React/Next.j ...

javascripthtmlcssreactjsnext.js

The JavaScript-rendered HTML button is unresponsive

I have a JavaScript function that controls the display of a popup window based on its visibility. The function used to work perfectly, with the close button effectively hiding the window when clicked. However, after making some changes to the code, the clo ...

javascripthtmlcssbutton

Cross-Origin pre-flight OPTIONS request not allowed

Latest Updates and Root Cause I am currently developing a client-side application that is designed to communicate with Phil Sturgeons' CodeIgniter REST application. The main problem arises when attempting to access the login method, where I encounte ...

phpjqueryapachecodeignitercors

Error thrown when attempting to access properties of null values (Uncaught TypeError: Cannot read properties of undefined (reading 'map'))

import React, { useState, useEffect } from "react"; import { TaskLists } from "./TaskLists"; import { Daycard } from "./daycard"; import { getTasks, deleteTask } from "../api/task.api"; export function TaskManager() { const [tasks, setTasks] = useState( ...

javascriptreactjsstate

How to use AJAX script to call a non-static page method in ASP.NET

Is it possible to achieve this task without utilizing the UpdatePanel feature? ...

c#asp.netjavascriptajax

The value of a select box cannot be retrieved until it has been clicked on

I am working with a selectBox element in my code: <select class="span2" name="filterYear" id="filterYear" style="margin-right:10px;"> <% for (var i = 0; i < years.length; i++) { %> <% if (years[i] == selectedYear) { %> ...

javascriptjquerynode.jsjquery-selectbox

Should I install both dependencies for Moment.js Plugins?

Thinking about incorporating a moment.js plugin such as moment-business-days. Do I need to install both packages? npm install moment-business-days npm install moment // yes / no / maybe? Or is it sufficient to just install the plugin since it already inc ...

javascriptnode.jsdatenpmmomentjs

Storing TypeScript functions as object properties within Angular 6

I am working on creating a simplified abstraction using Google charts. I have implemented a chartservice that will act as the abstraction layer, providing options and data-source while handling the rest (data retrieved from a REST API). Below is the exist ...

javascriptangularfunctiontypescriptobject

An error was thrown: Unexpected token ILLEGAL was detected

Working with Liferay 5.2 I would like to show a message related to the current language of Liferay. The code for this message is in Velocity language and can be found in navigation.vm file. <div id="navigation" class="sort-pages modify-pages"> ...

javascriptliferay-velocity