how to expand html multiple select box when clicked - html

Question

Is it possible to get a multiple select box to behave like a select box in the following way: Only show selection box (1 row) and expand when clicked?
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
but I only want to see the empty 1 row select box until clicked and then have it expand as a dropdown with scroll bar if needed

Answer 1

I hope CSS is enough to solve your problem. Try something like this.
select{height:20px}
select:focus{height:auto}
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

Answer 2

This accomplishes what you are looking for at a very basic level using jQuery. All options are initially hidden with CSS except the first option. Using jQuery, once the first option is clicked, then the remaining options will display.
Working Example: https://jsfiddle.net/byronj/fmvufoxz/4/
**HTML:**
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
**CSS:**
select option {
display: none;
}
select option:first-of-type, .show {
display: block;
}
**jQuery:**
jQuery(document).ready(function ($) {
$('option').on( "click", function() {
$('option').show();
});
});

Answer 3

I believe what you are trying to do can be accomplished by:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Try running the above snippet and see if that's what you were looking for.
Hope that helped!