Блог

В настоящее время у меня есть раздел страницы, который фильтрует изображения в стиле портфолио, нажимая кнопки категорий. Я хочу добавить функциональность для отображения текстового содержимого над фотографиями, используя DIV show / hide, аналогично тому, как работают вкладки. Вот HTML:

 <h1 class="wow slideInDown">Our Services</h1>
                </div><div id="first" class="divexp">This is the graphics content</div><div id="second" class="divexp">This is the motion content</div><div id="first" class="divexp">This is the print content</div><div id="second" class="divexp">This is the design content</div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <img class="img-responsive separator" src="img/separator.png" alt="Separator">
                </div>
            </div>

            <br>

            <!--filters-->
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
                    <div class="" id="filters">
                        <button class="btn btn-default" data-filter="*" data-toggle="tooltip" data-placement="top" title="18">Show All</button>
                        <button class="btn btn-default" data-filter=".graphics" data-toggle="tooltip" data-placement="top" title="4">Graphics</button>
                        <button class="btn btn-default" data-filter=".motion" data-toggle="tooltip" data-placement="top" title="3">Motion</button>
                        <button class="btn btn-default" data-filter=".print" data-toggle="tooltip" data-placement="top" title="5">Print</button>
                        <button class="btn btn-default" data-filter=".design" data-toggle="tooltip" data-placement="top" title="6">Design</button>
                    </div>
  

Что мне нужно добавить в следующий javascript, чтобы также включить кнопки фильтра с возможностью отображения и скрытия приведенных выше разделов?

 $(document).ready(function(){
"use strict";
//init Isotope
var $container = $('.gallery').imagesLoaded( function() {
    $container.isotope({
        // options
    });
});


$('#filters').on( 'click', 'button', function() {
    var filterValue = $(this).attr('data-filter');
    $container.isotope({ filter: filterValue });
});
  

Я установил для отображения divexp значение «нет» в css.

  $(document).ready(function(){

    $('#filters').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
   $(".divexp").show();
$container.isotope({ filter: filterValue });
     });
  }