Remove the "all" button in the portfolio filter and the auto-select button for a specific filter in JavaScript.
I'm trying to display an image of a portfolio with a filter, but I want to remove the all button and automatically display a specific filter button.
I am referring to this link
filter.js
$(".filter-button").click(function(){
var value = $(this).attr('data-filter');
if(value == "all")
{
//$('.filter').removeClass('hidden');
$('.filter').show('1000');
}
else
{
// $('.filter[filter-item="'+value+'"]').removeClass('hidden');
// $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
$(".filter").not('.'+value).hide('3000');
$('.filter').filter('.'+value).show('3000');
}
});
Html
<div id="portfolio">
<section class="header">
<h1 class="heading">Our Work</h1>
<span>A taste of our creativity</span>
</section>
<!-- EDIT -->
<div align="center">
<button class="btn btn-default filter-button" data-filter="towera">Tower A</button>
<button class="btn btn-default filter-button" data-filter="towerb">Tower B</button>
<button class="btn btn-default filter-button" data-filter="3d">3D Unit</button>
</div>
How can i do this?
source to share
You were on the right track by actually doing this. You have already changed yours data-filter
inside the class button
.
I would suggest not deleting the button ALL
, but leaving it so you can see all the images after filtering them.
The jquery code you provided is pretty much the same, the difference between the example will be that you will have to change the images in the links and tags in the class button
.
Here is a JS script with much the same example, only with changed filter names.
source to share