Start New Discussion within our Web Development Community

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:


$(':checkbox').change(function() {


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

This would be awesome, thanks!

This question has already been answered. Start a new discussion instead.