Keep the initial class of the element

Asked

Viewed 52 times

4

I have a script that does the toggle in the icon, interspersed when the element is clicked, my intention is when the second or the others icons were clicked, the elements remained with the class glyphicon-chevron-down.

<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
    <i class="taskIcon glyphicon glyphicon-chevron-down"></i>
</a>

<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
    <i class="taskIcon glyphicon glyphicon-chevron-down"></i>
</a>

<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
    <i class="taskIcon glyphicon glyphicon-chevron-down"></i>
</a>

$(".taskIcon").on("click", function() {
    $(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
});
javascript jquery

  • The code you put there only changes the clicked element.

  • if you click on the first icon, just once and then click on the second icon, the toggleclass that puts the glyphicon-chevron-up class, stays in the element, wanted to keep the glyphicon-chevron-down class for everyone after the toggle.

2 answers

4


You can use the .siblings to obtain adjacent elements and change their class.

$(".taskIcon").on("click", function() {
  var $this = $(this);
  $this.toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
  var context = $this.parent().siblings(); // Obtem os links adjacentes
  $(".taskIcon", context).removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><i class="taskIcon glyphicon glyphicon-chevron-down"></i></a>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><i class="taskIcon glyphicon glyphicon-chevron-down"></i></a>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><i class="taskIcon glyphicon glyphicon-chevron-down"></i></a>

  • 1

    +1 for remembering the siblings and by executable example.

  • in this case where we would have icon separated by Divs <div><i class=taskIcon></i></div> <div><i class=taskIcon></i></div> we would use siblings too

1

If I understand correctly, you wish that by clicking on an icon:

  • That icon has its class modified according to the current code, but that in addition...
  • ... all other icons take on a specific class.

You can include a few more instructions in your code, to change everyone who belongs to a certain class. So:

$(".taskIcon").on("click", function() {
    let iconeClicado = $(this),
        outrosIcones = $(".taskIcon").not(iconeClicado);

    outrosIcones
        .removeClass("glyphicon-chevron-up")
        .addClass("glyphicon-chevron-down");

    iconeClicado
        .toggleClass("glyphicon-chevron-down")
        .toggleClass("glyphicon-chevron-up");
});

This will remove the up arrow class from all icons except the clicked one. Similarly, it will give the down arrow class to all icons except the clicked one. Already the clicked icon keeps its behavior.

  • your reply this excellent also congratulations, as I am using too many clones of Divs, codes like yours will use a lot...

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.