I would like to create the following functionality:
A user clicks on a button (any button will do), and a select list will appear with all the options expanded inside a slide down window below the button.
I know how to make the slide window and all that, but I haven't found any info on how to make a select list appear as expanded given a click event.
The tricky part is, I'm working within a CMS context where I cannot change the html, so I have to implement a solution with only jQuery.
Here is the code for the form.
<p>Example Button (Could be any element outside the form)</p>
<form accept-charset="UTF-8" action="/accreditations" class="lang_dropdown_form language" id="lang_dropdown_form_language" method="post" name="lang_dropdown_form_language">
<div>
<img alt="English" class="language-icon" height="12" src="http://scsglobalservices_mobile_june.dd:8083/sites/all/modules/contrib/languageicons/flags/en.png" title="English" width="16">
<div class="form-item form-type-select form-item-lang-dropdown-select">
<div class="scs-select">
<select class="lang-dropdown-select-element form-select" id="lang-dropdown-select-language" name="lang_dropdown_select" style="width:165px">
<option selected="selected" value="en">
English
</option>
<option value="de">
Deutsch
</option>
<option value="pt-br">
Português
</option>
<option value="es">
Espa├▒ol
</option>
</select>
</div>
</div>
<input name="en" type="hidden" value="/accreditations">
<input name="de" type="hidden" value="/de/accreditations">
<input name="pt-br" type="hidden" value="/pt-br/accreditations">
<input name="es" type="hidden" value="/es/accreditations">
<noscript><div> <input type="submit" id="edit-submit" name="op" value="Go" class="form-submit" /> </div>
</noscript>
<input name="form_build_id" type="hidden" value="form-IpZgiF0U6WXF2LbQDnlwtEw2rz1lh2s6DMwGFTeumzE">
<input name="form_id" type="hidden" value="lang_dropdown_form">
</div>
</form>
This would work, but only with Chrome. jsFiddle