Here is my code: http://jsfiddle.net/AcfnR/19/
Using optgroup I created two categories in the dropdown menu: request new racks and repair/replace existing rack. I would like the id="description" textarea and the id="photo" file input to be hidden when the page loads. Currently I have these two wrapped in a div with id="damage_div" assuming it is easier to hide one div. When the user selects any of the options under the repair/replace existing rack optgroup the two hidden elements should be shown. If the user goes back and changes his selection to something in the request new racks optgroup the fields hide again. Also how would I make the show function be a slidedown transition and the hide a slideup transition?
I have reviewed a few examples from other stackoverflow questions and google but have not been able to make them work: http://jsfiddle.net/bryanjamesross/RF9Fg/1/
These examples link one select option to one input field and I want to link many select options to the same two input fields (or a div wrapping them).
HTML: Bike Rack Request
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="d" id="bike-rack-request" class="page">
<div data-role="header" data-theme="d">
</div><!--header-->
<div data-role="content" data-inset="true" class="content">
<div style="float:left;"><h3 data-theme="a">Bike Rack Request</h3></div>
<div style="float:right; padding-bottom:0px;"></div>
<form id="rackForm" action="rack-form.php" method="post" data-ajax="false">
<fieldset data-role="fieldcontain" class="ui-hide-label">
<label for="Business_Name">Name of business:</label>
<input type="text" data-theme="c" name="Business_Name" id="Business_Name" value="" placeholder="Name of business" data-mini="true"/>
</fieldset><!--fieldcontain-->
<fieldset data-role="fieldcontain" class="ui-hide-label">
<label for="Contact_Name">Contact name:</label>
<input type="text" data-theme="c" name="Contact_Name" id="Contact_Name" value="" placeholder="Contact name" data-mini="true" />
</fieldset><!--fieldcontain-->
<fieldset data-role="fieldcontain" class="ui-hide-label">
<label for="email">Email:</label>
<input type="email" data-theme="c" name="email" id="email" value="" placeholder="Email" data-mini="true"/>
</fieldset><!--fieldcontain-->
<fieldset data-role="fieldcontain" class="ui-hide-label">
<label for="Street_Address">Address:</label>
<input type="text" data-theme="c" name="Street_Address" id="Street_Address" value="" placeholder="Address of rack location" data-mini="true" />
</fieldset><!--fieldcontain-->
<fieldset data-role="fieldcontain" class="ui-hide-label">
<label for="Number_of_Racks" class="select">Select rack request</label>
<select name="Number_of_Racks" data-theme="c" id="Number_of_Racks" data-native-menu="true" data-mini="true">
<option value="" data-placeholder="true">Select rack request</option>
<optgroup label="Request new rack(s)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5+</option>
</optgroup>
<optgroup label="Repair/replace existing rack">
<option value="Seperating from concrete">Seperating from concrete</option>
<option value="Missing footing screws">Missing footing screws</option>
<option value="Rack has been cut">Rack is cut</option>
<option value="Rack has been smashed">Rack is smashed</option>
<option value="Rack was stolen">Rack was stolen</option>
<option value="Other">Other damage</option>
</optgroup>
</select>
</fieldset>
<div id="damage_div"><!-- next two div will be hidden at first -->
<fieldset data-role="fieldcontain" id="damagefield" class="ui-hide-label">
<label for="description">Describe the damage</label>
<textarea type="textarea" data-theme="b" name="description" id="description" class="required" maxlength="1000" value="" placeholder="Describe the damage" data-mini="true" /></textarea>
</fieldset><!--fieldcontain-->
<fieldset data-role="fieldcontain" id="photofield" class="photofield">
<label for="photo"> Photo of damaged rack: </label>
<input type="file" accept="image/*" capture="camera" data=theme="b" name="photo" id="photo" placeholder="Photo of damage">
</fieldset><!--fieldcontain-->
</div><!--end of hidden div wrapper-->
<button type="submit" data-theme="d" name="submit" value="submit-value" data-mini="true" data-rel="popup">Submit</button>
</form>
</div><!--content-->
<div data-role="footer" data-theme="none" class="footer">
</div><!--footer-->
</div><!--bike-rack-request-->
Javascript:
$('#Number_of_Racks').change(function() {
var value = $(this).val();
if (value == 'Other') {
$('#damage_div').show('fast');
}
else {
$('#damage_div').hide('fast');
}
});
