1,105,197 Community Members

Checkbox Filter System

Member Avatar
mmcdonald
Posting Pro in Training
473 posts since Sep 2012
Reputation Points: 28 [?]
Q&As Helped to Solve: 32 [?]
Skill Endorsements: 12 [?]
 
0
 

Hi all,

I'm currently looking at this JSFIDDLE and it's 50% of what I need.

I have a series of Accordions on my page (a list of courses). What I would like to do is assign these accordians to categories so that when a checkbox is pressed with the id of security any accordians with the security tag will show. If someone checks security and cisco all accordions with cisco AND security will show and so forth.

If you don't wan to open the JS Fiddle... the HMTL:

<input type="checkbox" id="set_1" checked> click to show text1
<p class = "wpbook_hidden wpbook_option_set_1"> This is option one</p>
<p class = "wpbook_hidden wpbook_option_set_1"> This is another option one</p>
<input type="checkbox" id="set_2"> click to show text1
<p class = "wpbook_hidden wpbook_option_set_2"> This is option two</p>

The JS:

$('.wpbook_hidden').hide();

$(':checkbox').change(function() {
    changeCheck(this);
});

$(':checkbox:checked').each(function(){
    changeCheck(this);
});

function changeCheck(x) {
    var option = 'wpbook_option_' + $(x).attr('id');
    if ($('.' + option).is(':visible')) {
        $('.' + option).fadeOut();
    }
    else {
        $('.' + option).fadeIn();
    }
}

This would be awesome, thanks!

Member Avatar
mmcdonald
Posting Pro in Training
473 posts since Sep 2012
Reputation Points: 28 [?]
Q&As Helped to Solve: 32 [?]
Skill Endorsements: 12 [?]
 
0
 

ahaaaa don't worry peeps found a solution: JS Fiddle

Question Self-Answered as of 8 Months Ago
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: