jQuery Isotope with text for every filter

Question

I'm using jQuery Isotope with filter method: http://isotope.metafizzy.co/demos/filtering.html

I would like to add an additional function when you click on a filter: a p text that shows up, different for each filter.

For now, I can only bring up the same text. I want to know how to create a different one for each category, which is shown only when you click on the filter, here's my jsFiddle: http://jsfiddle.net/itzuki87/Xy5pZ/

var $container = $('#container');
$container.isotope({
});

$('#filters a').click(function(){
 var selector = $(this).attr('data-filter');
  $(".text_category").slideUp(500);
  $(".text_category").slideDown(500);
 $container.isotope({ filter: selector });
return false;
});

Can anyone help me? Thank you.

Answer 1

you could use class added in data-filter in p, like

<li><a href="#" data-filter="*">show all</a></li>
<li><a href="#" data-filter=".metal">metal</a></li>
<li><a href="#" data-filter=".transition">transition</a></li>

And paragraphs

<p class="text_category hide" data-category="*">
Donec auctor faucibus libero ...
</p>
<p class="text_category hide" data-category=".metal">
metal para
</p>
<p class="text_category hide" data-category=".transition">
transition para content here
</p>

And js

$('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
    alert(selector);
    $(".text_category").hide();  //hide all p's
    $("p[data-category='"+selector+"']").slideUp(500); //show respective
    $("p[data-category='"+selector+"']").slideDown(500);
    $container.isotope({ filter: selector });
    return false;
});

Demo: Updated Fiddle

Answer 2

you could check the selector with a if statement, then change the text with an ajax script that replace the html of the div containing the text, or to actually print every div and hide/show them via jQuery.