Alt i kategorien vises - kun én ting skal vises.
Hej.Jeg har et stykke kode, som jeg har hentet gratis på nettet.
Jeg vil gerne bruge det til at vise nogle forskellige ting, alt efter hvad man klikker på.
Når man klikker på foredrag, skal 1. fremkomme osv., hvilket virker fint.
Problemet er FØR man vælger, hvor man kan se både 1, 2, 3, 4, 5 og 6, som først forsvinder, når man har valgt henholdsvis den ene eller den anden. Hvordan får jeg der til at stå "Vælg kategori" i stedet?
HTML-kode:
<div id="portfolio"><br><br><br><br>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="title">
<h2>KONSULENT, FOREDRAG OG SUPERVISION</h2>
</div>
<!-- ISO section -->
<div class="iso-section">
<ul class="filter-wrapper clearfix">
<li><a href="#" class="opc-main-bg" data-filter=".foredrag">Foredrag</a></li>
<li><a href="#" class="opc-main-bg" data-filter=".supervision">Supervision</a></li>
<li><a href="#" class="opc-main-bg" data-filter=".konsultation">Konsultation</a></li>
<li><a href="#" class="opc-main-bg" data-filter=".privatcoaching">Privat coaching</a></li>
<li><a href="#" class="opc-main-bg" data-filter=".andet">Andet</a></li>
</ul>
<div class="iso-box-section">
<div class="iso-box-wrapper col4-iso-box">
<div class="iso-box foredrag">1</div>
<div class="iso-box supervision">2</div>
<div class="iso-box konsultation">3</div>
<div class="iso-box privatcoaching">4</div>
<div class="iso-box andet">5<a href="images/portfolio-img6.jpg" data-lightbox-gallery="portfolio-gallery">6</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JS-kode:
// ISOTOPE FILTER
jQuery(document).ready(function($){
if ( $('.iso-box-wrapper').length > 0 ) {
var $container = $('.iso-box-wrapper'),
$imgs = $('.iso-box img');
$container.imagesLoaded(function () {
$container.isotope({
layoutMode: 'fitRows',
itemSelector: '.iso-box'
});
$imgs.load(function(){
$container.isotope('reLayout');
})
});
//filter items on button click
$('.filter-wrapper li a').click(function(){
var $this = $(this), filterValue = $this.attr('data-filter');
$container.isotope({
filter: filterValue,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var filter_wrapper = $this.closest('.filter-wrapper');
filter_wrapper.find('.selected').removeClass('selected');
$this.addClass('selected');
return false;
});
}
});