How to toggle button icon when a bootstrap dropdown is open

Question

I have a bootstrap dropdown list and I want to change the icon displayed(icon-deafult) in the button when I open the drop down(to icon-active). Here is the code:

<div id="Menu" class="dropdown">
  <a class="btn btn-default" id="MyButton" data-toggle="dropdown" role="button">
    <i class="icon-default"></i>
  </a>
  <ul class="dropdown-menu" role="menu">
    <li>...</li>
    <li>...</li>
  </ul>
</div>

.icon-default {
  content: url("path/path/cool.svg");
  background-size: cover;
}
.icon-active {
  content: url("path/path/hot.svg");
  background-size: cover;
}

I tried using .open > .icon-default {...} but it did not work. Am I doing it right? Is there a way to do this without writing any new scripts. Can I use existing CSS or bootstrap functionality to get this done?

Answer 1

If your dropdown get the class open when you open it, then you should just update your selector:

.open .icon-default {
  content: url("path/path/hot.svg");
}