1

I have a project section in my website that has 3 buttons. Each button filters to a specific project. The filter works but the problem is when the page loads it shows all 3 projects instead of just the 1 project pertaining to the current active button.

I am not sure what code to add to only show the current project for the default active button. Any help would be greatly appreciated

I have tried to add a css(display-none) script which hides the item but doesn't bring it back and leaves the space empty on the site as if it was still there.

(function(){

'use strict';


var $projects = $('.projects');

$projects.isotope({
    itemSelector: '.item',
    layoutMode: 'fitRows'
});

$('ul.filters > li').on('click', function(e){

    e.preventDefault();

    var filter = $(this).attr('data-filter');

    $('ul.filters > li').removeClass('active');
    $(this).addClass('active');

    $projects.isotope({filter: filter});

});
Captain_Duck
  • 11
  • 2

2 Answers2

0

display: none; does not hide the tag (see opacity: 0;), it does not render it at all, therefore all related rules do not apply. If you still have empty spaces, it means its parent is enforcing that, not the child element with display: none;.

If that is the case, you could probably refactor the parent's rules or move display: none; to the parent.

If you know in advance what the default situation is you could hardcode it in your html/css, and further manipulate it if needed. Otherwise, you can compute it at runtime using javascript.

vbuzze
  • 930
  • 1
  • 11
  • 25
0

Figured it out, all I needed to do was set an onload function that contained which filter I wanted displayed first in my .js file

$(document).ready(function() {
  $projects.isotope({filter: '.design'});
});
Captain_Duck
  • 11
  • 2