I have a select list:

```
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Menu</option>
<option value="http://google.com" class="home">1</option>
    <option value="http://google.com" class="home">2</option>
</select>

```

I also have an div that will overlay the entire screen when the select list is tapped or clicked (underneath the options):

```
<div class="overlay"></div>

```

Using jQuery I'd like to show/hide this overlay depending on the state the select is in. So if I open the select list, I want the overlay div to fade in and when the select list is closed or an option is selected I'd like the overlay to fade out. 

I cannot get my jQuery to work:

```
$('#cd-dropdown').onchange( function() {
    $( '#overlay' ).toggle.fadeIn();
    $( '#overlay' ).toggle.fadeOut();
});

```