CODEWITHSUNDEEP
javascriptjqueryhtmlcss
i-CONICA
i-CONICA

Reputation: 2379

Hide all elements that don't have class matching selected element

I've got a cool interface to build.

There's a horizontal scrolling div containing "tiles" of images, and a radio button under each. A user will scroll and decide on an image, then click it. The radio button checks, and jQuery shows another horiz scrolling div below, "now select subcategory"... The user can then further refine the selection by choosing another "tile". That's the process complete.

The problem is I'm not sure how to hide all the elements in the 2nd tier of selection if they don't have a class that matches that of the first selection. Sounds confusing maybe. Here's some simplified HTML, I've posted it on jsfiddle to save space here. http://jsfiddle.net/RTGC3/

So in summary, you'll see from the HTML what needs to happen. A user will see categories, when they click a category, subcategories without the same id as the clicked parent category will be hidden. All others will remain visible ready for the containing div to "show".

I hope I've explained the problem well enough. Thanks for any help offered.

Mike.

Upvotes: 0

Views: 1641

Answers (2)

Chinmaya003
Chinmaya003

Reputation: 476

Try with this Code:

$(document).ready(function() {
   $('input[type=radio][name="type"]').live('change', function() {
       var className = $(this).parent().attr("class");
       var clsID = className.split('_')[2];
       var subID = "in_cat_" + clsID;
       $("div[class*=in_cat]").hide();
       $("div." + subID).toggle("slow");
   });
});

This is the JSFiddle Link: http://jsfiddle.net/RTGC3/3/

Upvotes: 1

ninja
ninja

Reputation: 2263

Easiest if you name both container divs with id 1 for example to the same thing, so you would have TWO class="cat_id_1".

Then something liek this:

$('#cat-container div input').on('change', function() {
    var id = $(this).parent().attr('class');
    $('#des-container div.'+id).fadeToggle();
});

and in CSS you have display:none; on all divs in #des-container (for starters). This will listen for the radio button when it changes, first change it will call .fadeToggle() on div with matching class in your second row and show it, and second change will hide it again.

Was this what you wanted?

Actually I assuem you want all items in the second row to be displayed, but when checking a radio box you want to hide everything besides the one matching the id of the radiobutton? Then you could do like this:

 $('#des-container div'+id).addClass('show');
 $('#des-container div').not('div.show').fadeToggle();

So basically you add a class to the objects you decide to show, and hide everything that doesn't have that class. Ofcourse for this to work the other way (if you uncheck a radio-box) you would need to add a if-statement seeing the radio button that was changed was changed to checked or unchecked, if unchecked you just remove the class "show" from the element.

Upvotes: 1

Related Questions