javascript - jQuery Selectors with Variable Content -
i wrote small piece of jquery works filter content. when user clicks button (in case, li element), specific piece of content "toggles" in visibility.
$( "li:contains('blog')" ).click(function() { // if user clicks "blog" button $( ".blog" ).toggle('slow') // hide/show blog entries });
this works great, not entries going blogs - dynamic. need along lines of:
$( "li:contains('xyz')" ).click(function() { // if user clicks button $( ".xyz" ).toggle('slow') // hide/show entries belonging button });
essentially, if there better way of writing this:
$( "li:contains('blog')" ).click(function() { $( ".blog" ).toggle('slow') $(this).toggleclass( "secondary" ) }); $( "li:contains('twitter')" ).click(function() { $( ".twitter" ).toggle('slow') $(this).toggleclass( "secondary" ) }); $( "li:contains('facebpok')" ).click(function() { $( ".facebook" ).toggle('slow') $(this).toggleclass( "secondary" ) });
html
<ul class="button-group filter-button-group"> <li class="button tiny">blog </li> <li class="button tiny">twitter </li> <li class="button tiny">facebook </li> </ul>
current codepen: http://codepen.io/anon/pen/rpzann
try example:
$( "li" ).click(function() { var elem=$(this); var txt=elem.html(); $( "."+txt).toggle('slow'); $(this).toggleclass( "secondary" ) });
Comments
Post a Comment