I wanted to display only one div element. But when you load the page all are displayed. How to solve this problem ?

// portfolio filter $(window).load(function(){'use strict'; var $portfolio_selectors = $('.portfolio-filter >li>a'); var $portfolio = $('.portfolio-items'); $portfolio.isotope({ itemSelector : '.portfolio-item', layoutMode : 'cellsByRow' }); $portfolio_selectors.on('click', function(){ $portfolio_selectors.removeClass('active'); $(this).addClass('active'); var selector = $(this).attr('data-filter'); $portfolio.isotope({ filter: selector }); return false; }); }); 
 #portfolio { padding: 100px 0; background: #f5f5f5; } #portfolio .portfolio-filter { list-style: none; padding: 0; margin: 0 0 50px; display: inline-block; } #portfolio .portfolio-filter > li { float: left; display: block; } #portfolio .portfolio-filter > li a { display: block; padding: 7px 15px; background: #e5e5e5; color: #64686d; position: relative; } #portfolio .portfolio-filter > li a:hover, #portfolio .portfolio-filter > li a.active { background: #45aed6; color: #fff; box-shadow: 0 -3px 0 0 #318daf inset; -webkit-box-shadow: 0 -3px 0 0 #318daf inset; } #portfolio .portfolio-filter > li a.active:after { content: " "; position: absolute; bottom: -17px; left: 50%; margin-left: -10px; border-width: 10px; border-style: solid; border-color: #318daf transparent transparent transparent; } #portfolio .portfolio-filter > li:first-child a { border-radius: 4px 0 0 4px; } #portfolio .portfolio-filter > li:last-child a { border-radius: 0 4px 4px 0; } #portfolio .portfolio-items { margin: 15px; } #portfolio .portfolio-item { width: 100%; position: relative; padding: 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #portfolio .portfolio-item .portfolio-item-inner { position: relative; } #portfolio .portfolio-item .portfolio-item-inner .portfolio-info { opacity: 0; transition: opacity 400ms; -webkit-transition: opacity 400ms; position: absolute; bottom: 0; left: 0; right: 0; padding: 10px; background: rgba(0, 0, 0, 0.5); color: #fff; } #portfolio .portfolio-item .portfolio-item-inner .portfolio-info h3 { font-size: 16px; line-height: 1; margin: 0; color: #fff; } #portfolio .portfolio-item .portfolio-item-inner .portfolio-info .preview { position: absolute; top: -18px; right: 12px; border-radius: 50%; background-image: -moz-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%); background-image: -webkit-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%); background-image: -ms-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%); width: 36px; height: 36px; line-height: 36px; text-align: center; color: #fff; box-shadow: 0 0 0 2px #fff; -webkit-box-shadow: 0 0 0 2px #fff; } #portfolio .portfolio-item:hover .portfolio-info { opacity: 1; } 
 <section id="portfolio"> <div class="container"> <div class="section-header"> <h2 class="section-title text-center wow fadeInDown">Our Works</h2> <p class="text-center wow fadeInDown">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p> </div> <div class="text-center"> <ul class="portfolio-filter"> <li><a class="active" href="#" data-filter="*">All Works</a></li> <li><a href="#" data-filter=".lan1">lan1</a></li> <li><a href="#" data-filter=".lan2">lan2</a></li> <li><a href="#" data-filter=".portfolio">Portfolio</a></li> </ul><!--/#portfolio-filter--> </div> <div class="portfolio-items"> <div class="portfolio-item lan1"> <div class=".col-xs-9"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae perferendis, alias, incidunt rem quas quam iure, ipsam labore esse optio minima commodi soluta, similique qui explicabo saepe aut doloribus harum!</p> </div> </div><!--/.portfolio-item--> </div> <div class="portfolio-items"> <div class="portfolio-item lan2"> <div class=".col-xs-9"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae perferendis, alias, incidunt rem quas quam iure, ipsam labore esse optio minima commodi soluta, similique qui explicabo saepe aut doloribus harum!</p> </div> </div><!--/.portfolio-item--> </div> </div><!--/.container--> </section><!--/#portfolio-->

    1 answer 1

    Add to CSS styles the elements you want to hide from the display:none; page display:none; or add a special style

     .hidden-element { display:none; }

    and add the name of this style to the elements that you want to hide for example:

     <div class="text-center hidden-element">...</div>

    or in javascript:

     var div = document.querySelector('.text-center'); div.classList.toggle('hidden-element');

    PS: the classList method toggle adds the class name to the element if it does not exist and deletes it if it is

    • Yes, thanks to your rhenium, I would like to use it, but unfortunately they should also be otbrazhatsya when silk, and not hide them completely - kirgiz_jigit
    • Here is the last paragraph of my answer just for this - Stranger in the Q