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: 
I hope CSS is enough to solve your problem. Try something like this.

```css
select{height:20px}
select:focus{height:auto}
```

```html
    <select multiple>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
```
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();
    });
});

```