Question: I have a bootstrap accordion and i'd like the icon to change when it's expanded or collapsed.

my JS code is this:

```
<script>
$('.collapse').on('show', function(){
    $(this).parent().find(".icon myicons-down").removeClass("myicons-down").addClass("myicons-up");
}).on('hide', function(){
    $(this).parent().find(".icon myicons-up").removeClass("myicons-up").addClass("myicons-down");
});
</script>

```

and the HTML like:

```
<span class="icon myicons-down"></span><a data-toggle="collapse" data-target="#132" class="accordion-toggle">#132</a>

```

Note that I have multiple expand/collapse on the same page. But whatever I do, it's not changing the icon...

Answer: 
you forgott to put a dot . before myicons-down class name

```
$(this).parent().find(".icon .myicons-down").removeClass("myicons-down").addClass("myicons-up");

```
this line:

```
$(this).parent().find(".icon myicons-down").removeClass("myicons-down").addClass("myicons-up");

```

would be looking for a `class` of `.myicons-down` (it doesnt have a `.` so right now it's not looking for anything) inside of `.icon` but it looks like your HTML set up should be trying to find `.icon` **WITH** a class of `.myicons-down`. Change it to be:

```
$(this).parent().find(".icon.myicons-down").removeClass("myicons-down").addClass("myicons-up");

```

Also what is `$(this)` referring to? Where is `.collapse` in your HTML?