Make the DIV class inactive when loading until a list item is selected

Question

I need help creating a portfolio that runs on my website.

Currently, I have ALL pictures (from each of the four categories) displayed at boot time. However, only photos from the selected category are displayed when I click to activate this category.

I want to do this when the site loads, and before something is clicked, none of the photos load or only one specified photo of the category is loaded.

So far I have this:

            <ul class="simplefilter">
                <li class="active" data-filter="1"><p>BRIDAL</p></li>
                <li data-filter="2"><p>PHOTOSHOOT</p></li>
                <li data-filter="3"><p>LASHES</p></li>
                <li data-filter="4"><p>OTHER</p></li>
            </ul>

, and then:

               <div class="filtr-container">

               <!-- bridal photos -->

                    <div class="col s6 filtr-item col-pd" data-category="1">
                        <a href="img/portfolio/bridal/bridal_1.jpg" class="image-popup"><img class="responsive-img" src="img/portfolio/bridal/bridal_1.jpg" alt="sample image"></a>
                    </div>


                <!-- end bridal photos -->


                <!-- photoshoot photos -->

                    <div class="col s6 filtr-item col-pd" data-category="2">
                        <a href="img/portfolio/photoshoot/photoshoot_1.jpg" class="image-popup"><img class="responsive-img" src="img/portfolio/photoshoot/photoshoot_1.jpg" alt="sample image"></a>
                    </div>

                 <!-- end photoshoot photos -->


                 <!-- lashes photos -->

                    <div class="col s6 filtr-item col-pd" data-category="3">
                        <a href="img/portfolio/lashes/lashes_1.jpg" class="image-popup"><img class="responsive-img" src="img/portfolio/lashes/lashes_1.jpg" alt="sample image"></a>
                    </div>

                  <!-- end lashes photos -->


                  <!-- other photos -->

                    <div class="col s6 filtr-item col-pd" data-category="4">
                        <a href="img/portfolio/other/other_1.jpg" class="image-popup"><img class="responsive-img" src="img/portfolio/other/other_1.jpg" alt="sample image"></a>
                    </div>

                   <!-- end lashes photos -->
                   </div>

, and my Javascript looks like this:

$(function(){
    'use-strict';

    $('.simplefilter li').load(function() {
    $('.filtr-container').removeClass('active');
    });

     // portfolio filter container
    $('.filtr-container').filterizr();

    // portfolio filter
    $('.simplefilter li').click(function() {
        $('.simplefilter li').removeClass('active');
        $(this).addClass('active');
    });

    // portfolio image-popup
    $(".image-popup").magnificPopup({
        type: "image",
        removalDelay: 300,
        mainClass: "mfp-fade"
    });

});

Any thoughts?

Thanks in advance!

Answer 1

, , filterizr, .

, $('...').filterizer(), :

$('.filtr-container').filterizr('filter', '1');

Answer 2

, , , - :

function changeSrc(){
	document.getElementById("myPhoto").src = "https://image.freepik.com/psd-gratis/projeto-do-fundo-da-textura-de-madeira-branca_1022-75.jpg";
}

#myPhoto {
  max-width: 200px;
}

.container{
  width: 200px;
  height: 200px;
}

<div class="container" onclick="changeSrc()">
  <h3>
    Click to show image!
  </h3>
  <img src="" id="myPhoto">
</div>

Hide result

, , , , , . , , .