I tried to create a drop down that upon selecting a certain option (yes) it reveals more content. I tried to do this using the bootstrap accordion functionality without success. I've created a bootply of the drop down and the accordion, just as an example of how I want it to work. http://bootply.com/64676 - So, click 'Yes' in the drop down list and an accordion opens underneath with content related to that answer.
<label>Do you have any children?</label>
<select>
<option>Select:</option>
<option>Yes</option>
<option>No</option>
</select>
<!-- Example of how I want the above working -->
<p>Name of your hotel - <a class="accordion-toggle" data-toggle="collapse" href="#hotel">Why do we need this?</a>
</p>
<!-- Popup hidden content -->
<div id="hotel" class="accordion-body collapse">
<div class="alert">
<h4>Content here!</h4>
<p>blurb - how many?</p>
</div>
first you should check for your options value attribute, I put the example here http://jsfiddle.net/bnJvG/
<label>Do you have any children?</label>
<select name="children">
<option value="">Select:</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<div id="hotel" for-field="children" for-value="yes" class="accordion-body collapse">TEST</div>
And de JS
$('select[name="children"]').change(function(event){
var selected = $(this).find('option:selected');
var value = selected.attr("value");
var name= $(this).attr("name");
var selector = '[for-field="'+name+'"]';
$('.accordion-body'+selector).addClass('collapse');
var selectorForValue = selector+'[for-value="'+value+'"]';
var selectedPanel = $('.accordion-body'+ selectorForValue );
selectedPanel.removeClass('collapse');
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.