I have this html code below with the caret class fa fa-caret-down. Now I want that if the user clicks on the caret, the caret-down class shall gets removed and get replaced with the fa fa-caret-up class. And the same again, if he klicks on the caret-up class, it shall get back to the caret-down class.

( any other way is also okay ). I've tried this:

$(document).ready(function() {
    $('.fa-caret-down').on('click', function () {
        $(this).removeClass('fa-caret-down').addClass('fa-caret-up');
    });
    $(this).removeClass('fa-caret-up').addClass('fa-caret-down');
});

[ This toogle also runs very bad with this code ]

But this only works for the first part. If I'm trying to get back to the caret-down, nothing happens.

Thats my HTML:

<div id="acc-construct" class="hidden">
    <div class="acc-group">
        <div class="acc-head">
            <a class="acc-toggle collapsed acc-default" data-toggle="collapse"
               data-parent="#acc" href="#collapse-divsInContainer">
                <i data-arrow="" class="pull-right fa fa-caret-down"></i>
            </a>
        </div>
        <div id="collapse-divInContainer" class="acc-body collapse">
            <div class="acc-inner">
                <dl class="dl-horizontal"></dl>
                <div class="separator"></div>
            </div>
        </div>
    </div>
</div>

I'm still new in jquery/Js and sorry for my bad english.

Thanks for any help !

I have this html code below with the caret class fa fa-caret-down. Now I want that if the user clicks on the caret, the caret-down class shall gets removed and get replaced with the fa fa-caret-up class. And the same again, if he klicks on the caret-up class, it shall get back to the caret-down class.

( any other way is also okay ). I've tried this:

$(document).ready(function() {
    $('.fa-caret-down').on('click', function () {
        $(this).removeClass('fa-caret-down').addClass('fa-caret-up');
    });
    $(this).removeClass('fa-caret-up').addClass('fa-caret-down');
});

[ This toogle also runs very bad with this code ]

But this only works for the first part. If I'm trying to get back to the caret-down, nothing happens.

Thats my HTML:

<div id="acc-construct" class="hidden">
    <div class="acc-group">
        <div class="acc-head">
            <a class="acc-toggle collapsed acc-default" data-toggle="collapse"
               data-parent="#acc" href="#collapse-divsInContainer">
                <i data-arrow="" class="pull-right fa fa-caret-down"></i>
            </a>
        </div>
        <div id="collapse-divInContainer" class="acc-body collapse">
            <div class="acc-inner">
                <dl class="dl-horizontal"></dl>
                <div class="separator"></div>
            </div>
        </div>
    </div>
</div>

I'm still new in jquery/Js and sorry for my bad english.

Thanks for any help !

• javascript
• jquery

• You could check if the button has a caret-down via .hasClass(), if it does, remove the down and add the up. If it doesn't; remove the up and add the down – CaptainCarl Commented Sep 12, 2016 at 6:25
• Use toggleClass() - it does a lot of work for you api.jquery./toggleclass – StudioTime Commented Sep 12, 2016 at 6:26

3 Answers 3

Set another class (caret-icon) on the caret element and attach click event to that class:

<i class="caret-icon fa fa-caret-down"></i>

And use toggleClass() method:

$(document).on('click', '.caret-icon', function() {
   $(this).toggleClass('fa-caret-up fa-caret-down');
})

Use 'if - else' condition with 'hasClass' method.

Here is the Jquery

      $(document).ready(function () {
            $('.fa-caret-down').on('click', function () {
                if ($(this).hasClass('fa-caret-down')) {
                    $(this).removeClass('fa-caret-down').addClass('fa-caret-up');
                }else{
                    $(this).removeClass('fa-caret-up').addClass('fa-caret-down');
                }
            });
        });

$('.fa-caret-down') finds the DOM - elements that have the class fa-caret-down when the code is executed, in your case after initialization. These elements get a click handler that removes fa-caret-down and adds fa-caret-up. The elements that have this handler don't change later. So, a second click on one of the elements also removes fa-caret-down and adds fa-caret-up.

You have to check in the handler if the element currently has class fa-caret-down or fa-caret-up. If it has class fa-caret-down you have to remove fa-caret-down and add fa-caret-up. If it has class fa-caret-up you have to remove fa-caret-up and add fa-caret-down.

Your current code $(this).removeClass('fa-caret-up').addClass('fa-caret-down'); does not help because it is executed only one time after initialization.