How to create a selector tool with jquery - php

Question

I am looking to create a dog breed selector tool where users can narrow down dog breeds by selecting certain characteristics. This is what I have so far:
$(document).ready(function(){
$("#big,#long").click(function(){
$("#pug").hide();
});
$("#small,#long").click(function(){
$("#bull").hide();
});
$("#big,#short").click(function(){
$("#pom").hide();
});
$("#small,#short").click(function(){
$("#new").hide();
});
});
</script>
<p>Size</p>
<button id="small">Small</button>
<button id="big">Big</button>
<p>Coat</p>
<button id="short">Short Hair</button>
<button id="long">Long Hair</button>
<p id="pug">Pug</p>
<p id="bull">Bulldog</p>
<p id="pom">Pomeranian</p>
<p id="new">Newfoundland</p>
I've tried incorporating .show() in order to get the breeds to reappear after another characteristic is reselected, but then all of the breeds reappear which defeats the purpose of the tool.
I know a little php, so let me know if it would be easer using it instead.
Thanks

Answer 1

It would be easier if you just added the specific class to the name (demo):
<p id="pug" class="small short">Pug</p>
<p id="bull" class="big short">Bulldog</p>
<p id="pom" class="small long">Pomeranian</p>
<p id="new" class="big long">Newfoundland</p>
Then you can use this code:
$(function () {
var size = '',
coat = '',
$list = $('#list'),
selectType = function () {
$list.find('p').hide();
$list.find('p' + size + coat).show();
};
$("#big,#small").click(function() {
size = '.' + this.id;
$('#big').toggleClass('selected', this.id === "big");
$('#small').toggleClass('selected', this.id === "small");
selectType();
});
$("#short,#long").click(function () {
coat = '.' + this.id;
$('#short').toggleClass('selected', this.id === "short");
$('#long').toggleClass('selected', this.id === "long");
selectType();
});
});
Opps, updated the code to work properly and color the selected button.