javascript - dynamic show/hide of div elements using id -

javascript - dynamic show/hide of div elements using id -

$(document).ready(function() { $("input[name$='type']").click(function() { var value = $(this).val(); if(value == 'variant-3'){ $('[id*=variant]').show(); } else{ $('[id*=variant]').hide(); $('.'+ value ).show(); } }).click(); });

http://jsfiddle.net/sushanth009/h6q38/1/

uses class show/hide div elements. how can same achieved using id instead of class? tried, end hiding or showing all.

this code http://jsfiddle.net/h6q38/8/

i think want :

<div id="variant-1">variant 1</div> <div id="variant-2">variant 2</div> <div id="variant-1.1">variant 1.1</div> <!-- don't reuse id! --> <div id="variant-2.1">variant 2.1</div> <!-- don't reuse id! --> $("input[name$='type']").click(function() { if (this.value=='variant-3'){ $('[id^=variant]').show(); } else{ $('[id^=variant]').hide(); $('[id^='+this.value+']').show(); } });

demonstration

javascript jquery html ajax