Как я могу убрать ряд изображений после нажатия кнопки?

Question

Я хочу иметь возможность нажимать одну из «кнопок», как показано на изображении ниже. Когда кнопка нажата, соответствующий раздел из 3 изображений появится / скроется. Например, если я нажимаю на «Тапас», появляются только изображения тапас. Если я нажимаю на «главное», скрываются / отображаются только основные изображения.

Вот мой HTML код:

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

Все идеально, включая функцию, которую вы создали, единственная проблема заключается в том, что у вас нет wrap изображений main courses и dessert изображений в div show-tapas-2 и show-tapas-3, а их a класс тегов load-more-button-2 и load-more-button-3

Так же, как вы сделали это с изображениями Tapas, а затем вы можете использовать функцию для каждого соответствующего содержимого

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

Используя для этого jquery.

У меня есть правило в теге. (атрибут img-data-class)

и в строке, содержащей ваше изображение, должно быть указано имя вашего класса.

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