Hello to all! There is a drop-down list, with an arrow to the right, which should change depending on the list opened or collapsed.

enter image description here

When I open it, the arrow behaves as it should, looks down.

enter image description here

But when re-folding the list, the arrow and looks down, does not change. And should look up. I do it like this:

$('.list_title').click( function() { $('.list_content').slideToggle() $('.listBgArr').addClass('uppArrow'); });

That is, when I click on list_title , the list is expanded and the uppArrow class is added to the arrow, which in css changes the background-position the css sprite arrow. Can someone help why this happens?

  • four
    toggleClass instead of addClass - Oleksandr
  • @Oleksandr, damn it. And I suffered almost a day. Thanks I'll know. Put a thumbs up. - Michael Miller

2 answers 2

A comment from @Oleksandr resolved the issue - toggleClass вместо addClass .

    Small alternative:

    CSS:

     .usefull-links:hover{cursor: pointer;} .usefull-links{position: relative;background-color: #5dcef9;padding: 5px 10px;border-radius: 5px;} i.flaticon-down-arrow{position: absolute;right: 15px;bottom: 0px;} .links{display: none;position: absolute;} .links a{display: block;} .info-div{position: relative;padding-top: 20px;} .info-div i{transition: ease all 0.5s;} .info-div .active i{transform: rotate(180deg);}

    HTML:

      <div class="col-lg-4 info-div"> <div class="usefull-links">Usefull links<i class="flaticon-down-arrow"></i></div> <div class="links"> <a href="https://jquery.com/download/" target="_blank">Get jQuery</a> <a href="https://getbootstrap.com/docs/3.3/getting-started/" target="_blank">Get bootstrap</a> </div> </div>

    Js:

     $('.usefull-links').bind('click', function(){ $(this).toggleClass('active'); $('.links').slideToggle(); });