A Pen by Attila Bakos

Thumbnail
This awesome code was written by abakos, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright abakos ©
  • HTML
  • CSS
  • JavaScript
    	<section class="section__product__filter">
		<div class="">
			<p class="">Product type</p>
			<ul class="">
				<li class="filter-li "><a href="#" class="pmf_prt1">Filter A1</a></li>
				<li class="filter-li"><a href="#" class="pmf_prt2">Filter A2</a></li>
			</ul>
		</div>
				<div class="">
					<p class="filter-li filter-active"><a href="#" class="ft-all">All</a></p>
		</div>
	</section>

<div class="product-boxes">
	<section class="pmf_prt1">
		<div class="">Content</div>
	</section>
	
	<section class="pmf_prt2">
		<div class="">Content2</div>
	</section>
</div>


/*Downloaded from https://www.codeseek.co/abakos/a-pen-by-attila-bakos-RjyrPm */
    


/*Downloaded from https://www.codeseek.co/abakos/a-pen-by-attila-bakos-RjyrPm */
    jQuery(document).ready(function ($) {
	$('.filter-li a').click(function () {
        var pres = $(this).attr('class');
        $('.filter-li').removeClass('filter-active');
        $(this).parent().addClass('filter-active');

        console.log(pres)

        if (pres == 'ft-all') {
            $('.product-boxes').children('section').fadeIn(200);
        } else {
            $('.product-boxes').children('section:not(.' + pres + ')').fadeOut(200);
            $('.product-boxes').children('section.' + pres).fadeIn(200);
        }
        return false;
    });
	});


Comments