CODEWITHSUNDEEP
javascriptjquerycssfiltershow-hide
Jack_D
Jack_D

Reputation: 75

Having two different features using .show() and .hide() without conflicting eachother

Please see here: http://jsfiddle.net/mAMY2/1/

As you can see, there is a filter feature as well as a "show more" feature. I'd like to change the way the "show more" feature functions to avoid conflict with the filter function. For example, maybe there is an alternative to .show() and .hide()?

Summary of the conflict:

The "Show More" function and "Filter" function both work by manipulating the display value. If, for example, only three out of nine boxes are showing and you choose to filter a specific category, more than three boxes could potentially be displayed. Similarly, if you choose to only > display a specific category, but then wish to show more, the other category will also be ?> displayed.

Thank you

Upvotes: 0

Views: 126

Answers (2)

FosterZ
FosterZ

Reputation: 3911

if i understand correctly, when you click show More you are expecting the same category box which is selected that only should display not all then you can use this, i dont think its a good way coz if the category increases so does the if condition.But atleast you get an idea

var cat=0;
$('#showMore a').click(function(){
    if(cat==0)
     $('.box:hidden:lt(3)').animate({height: 'toggle'}, 500);
    if(cat==1)
     $('.box cat1:hidden:lt(3)').animate({height: 'toggle'}, 500);
    if(cat==2)
     $('.box cat2:hidden:lt(3)').animate({height: 'toggle'}, 500);
});

Upvotes: 0

David
David

Reputation: 435

You could use .addClass and .removeClass and then control visibility with css.

Upvotes: 1

Related Questions