CODEWITHSUNDEEP
jquerytwitter-bootstraponclicktoggle
stephjhonny
stephjhonny

Reputation: 225

Change chevron up and down on click

 $("button").click(function () {
        $("ul").toggle();
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button> <img src="/images/default_avatar.jpg">Hello!<i class="fa fa-chevron-up"></i> </button>
                    <ul style="display:none;">
                        <li><a href="#">Account settings</a></li>
                        <li><a href="#">Logout</a></li>
                    </ul>

I have a button it has a chevron up and a list inside it, what i want to do is show the list and hide it on toggle and i did that, and i want the chevron up to change on toggle also to up and down, how can i do that? here is my code:

Upvotes: 2

Views: 8893

Answers (2)

Corentin PRUNE
Corentin PRUNE

Reputation: 388

You could also use the toggleClass jQuery method and bind a state class, like that

$("button").click(function() {
  $(this).parent('.dropdown').toggleClass('js-opened');
});
.dropdown.js-opened i {
  transform: rotate(180deg)
}

.dropdown.js-opened>ul {
  display: block
}

.dropdown>ul {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button> <img src="/images/default_avatar.jpg">Hello!<i class="fa fa-chevron-up"></i> </button>
<ul>
  <li><a href="#">Account settings</a></li>
  <li><a href="#">Logout</a></li>
</ul>
</div>

Upvotes: 0

karthikaruna
karthikaruna

Reputation: 3256

$("button").click(function () {
    $("ul").toggle();
    $(this).children('.fa').toggleClass('fa-chevron-up fa-chevron-down');
});

Upvotes: 5

Related Questions