jQuery and the not selector
I'm just working on a site that will have a collect from store option. I needed to be able to hide and show the relevant parts of the form depending on what they select. With jQuery and the not selector this is really easy to achieve, so I thought I'd knock up a quick blog post...
<form action="someaction.cfm" method="post">
<div id="delivery_type">
<label for="deliverytype_collect">
<input type="radio" name="collection" id="deliverytype_collect" value="1" />
Collect from store
</label>
<!--- this div is hidden for javascript users --->
<div id="deliveryinfo_collect" class="hideme">
<label for="store">Choose Store...</label>
<select name="store" id="store">
<option>London</option>
<option>New York</option>
<option>Peckham</option>
</select>
</div>
<label for="deliverytype_ship">
<input type="radio" name="collection" id="deliverytype_ship" value="1" />
Ship to a UK address
</label>
<!--- this div is hidden for javascript users --->
<div id="deliveryinfo_ship" class="hideme">
<label for="address">Address</label>
<textarea name="address"></textarea>
</div>
</div>
</form>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
// user has Javascript so hide elements
$hidden = $('div.hideme').hide();
// detect radio option being selected
$('[name="collection"]').click(function(){
var type = this.id.split('_');
type = type[type.length-1];
var toshow = '#deliveryinfo_'+type;
// hide other options excluding the selected one
$hidden.not(toshow).hide('fast');
$(toshow).show('fast');
});
});
</script>
- Posted in:
- jQuery
