I've got some rough-and-ready code that allows me to filter some results based on two radio buttons. I'm struggling to add a third variant that will serve as a 'show all', ie to display all four divs at once. Any help would be much appreciated.
<p class="text1">Variants
<label>
<input type="radio" name="type" value="variant-2" id="type_0" checked="checked" />
Variant 1</label>
<label>
<input type="radio" name="type" value="variant-1" id="type_1" />
Variant 2</label>
</p>
<script>
$(document).ready(function(){
$("input[name$='type']").click(function(){
var value = $(this).val();
if(value=='variant-2') {
$(".variant-1").show();
$(".variant-2").hide();
}
else if(value=='variant-1') {
$(".variant-2").show();
$(".variant-1").hide();
}
});
$(".variant-1").show();
$(".variant-2").hide();
});
</script>
<div class="variant-1">Variant 1</div>
<div class="variant-2">Variant 2</div>
<div class="variant-1">Variant 1.1</div>
<div class="variant-2">Variant 2.1</div>
How about this? http://jsfiddle.net/WyxmF/1
<p class="text1">Variants
<label>
<input type="radio" name="type" value="variant-2" id="type_0" checked="checked" />
Variant 1</label>
<label>
<input type="radio" name="type" value="variant-1" id="type_1" />
Variant 2</label>
<label>
<input type="radio" name="type" value="variant-all" id="type_all" />
All</label>
</p>
<div class="variant variant-1">Variant 1</div>
<div class="variant variant-2">Variant 2</div>
<div class="variant variant-1">Variant 1.1</div>
<div class="variant variant-2">Variant 2.1</div>
$("input[name$='type']").click(function() {
var value = $(this).val();
if (value == 'variant-2') {
$(".variant-1").show();
$(".variant-2").hide();
}
else if (value == 'variant-1') {
$(".variant-2").show();
$(".variant-1").hide();
}
else if (value == 'variant-all') {
$(".variant").show();
}
});
$(".variant-1").show();
$(".variant-2").hide();