I'm new with jQuery and fairly new to JS (a little knowledge) and I'm wanting to create a jQuery code.

Firstly, here is my HTML code:

<div id="user-controls">
    <div class="choice" id="choice-all" onclick="showAll();">All</div>
    <div class="choice" id="choice-asus" onclick="justASUS();">ASUS</div>
    <div class="choice" id="choice-htc" onclick="justHTC();">HTC</div>
</div>

<div id="devices">
    <div class="android asus">Nexus 7</div>
    <div class="android htc">One S</div>
    <div class="android htc">One X+</div>
    <div class="android asus">Transformer Prime</div>
    <div class="winph htc">Windows Phone 8X</div>
</div>

I'm wanting a jQuery code that would do the following:

1. If I click on the #choice-asus DIV, then all DIVs with the class .htc would be set to display="none"

2. If I click on the #choice-htc DIV, then all DIVs with the class .asus would be set to display="none"

3. If I click on the #choice-all DIV, then all DIVs would be set to display="inline-block" (this is also the default setting when the page first loads)

I've already tried the following code, but it doesn't do anything.

$(document).ready(function(){
    $("#choice-htc").click(function(){
        $(".htc").hide();
    })
});

Thank you for any help, Dylan.

I'm new with jQuery and fairly new to JS (a little knowledge) and I'm wanting to create a jQuery code.

Firstly, here is my HTML code:

<div id="user-controls">
    <div class="choice" id="choice-all" onclick="showAll();">All</div>
    <div class="choice" id="choice-asus" onclick="justASUS();">ASUS</div>
    <div class="choice" id="choice-htc" onclick="justHTC();">HTC</div>
</div>

<div id="devices">
    <div class="android asus">Nexus 7</div>
    <div class="android htc">One S</div>
    <div class="android htc">One X+</div>
    <div class="android asus">Transformer Prime</div>
    <div class="winph htc">Windows Phone 8X</div>
</div>

I'm wanting a jQuery code that would do the following:

1. If I click on the #choice-asus DIV, then all DIVs with the class .htc would be set to display="none"

2. If I click on the #choice-htc DIV, then all DIVs with the class .asus would be set to display="none"

3. If I click on the #choice-all DIV, then all DIVs would be set to display="inline-block" (this is also the default setting when the page first loads)

I've already tried the following code, but it doesn't do anything.

$(document).ready(function(){
    $("#choice-htc").click(function(){
        $(".htc").hide();
    })
});

Thank you for any help, Dylan.

• javascript
• jquery
• css
• html

Share Improve this question Follow edited Oct 25, 2012 at 8:42 DylRicho asked Oct 25, 2012 at 6:11 DylRichoDylRicho 92511 gold badge1212 silver badges2525 bronze badges 3

• Where is the element with "HTC" id (it is case sensitive) – AnandVeeramani Commented Oct 25, 2012 at 6:18
• Oops. Sorry. That was taken from a separate test file but it would have done the same as #choice-htc in this code. – DylRicho Commented Oct 25, 2012 at 6:37
• @AnandVeeramani I've fixed it now. I used HTC to see if it would hide its own matching DIV elements but it didn't work. If it did, I would have swapped the coding afterwards. – DylRicho Commented Oct 25, 2012 at 8:43

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

So many choices :) http://jsfiddle/9RtUE/

    $(function(){
        $("#user-controls").on('click','div',function(){
           var classToShow = this.id.split('-')[1],
               filter = classToShow === "all" ? 'div': '.' + classToShow;
           $("#devices").children().show().not(filter).hide();
         }); 
     });

try using jquery

Demo

$('#choice-all').click(function(){
  $('.htc, .asus').show();
});

$('#choice-asus').click(function(){
  $('.asus').show();
  $('.htc').hide();
});

$('#choice-htc').click(function(){
  $('.htc').show();
  $('.asus').hide();
});   

Demo here

$(document).ready(function(){   
    $(".choice").click(function(){
         $(".android,.winph").hide();
        if($(this).attr("id")=="choice-all"){
            $(".android,.winph").show();
        }else if($(this).attr("id")=="choice-asus"){
            $(".asus").show();
        }else if($(this).attr("id")=="choice-htc"){
            $(".htc").show();
        }
    });
});

to keep it easy and clean you should use a solution such as this one

$(function(){
    $('#choice-asus').on('click', function(){
        $('#devices > div:not(.asus)').hide();
    });
});

it basically says, if you click on #choice-asus, hide all divs in #devices which have no class asus.

you can extend / modify this for your own needs. besides, its remend to use jquerys .on() method instead click/bind or what ever handler you'd apply.

$(document).ready(function(){
    if($('div').attr('class')=='X')
    {
         $('div').not($(this)).css('display','none');
    }
});

You can try the following code-

function showAll(){
    $("#devices div").show();
}
function justASUS(){
    $("#devices div").hide();
    $("#devices .asus").show();
}
function justHTC(){
    $("#devices div").hide();
    $("#devices .htc").show();    
}

demo here.