jQuery doubt all elements are affected by function

Question

jQuery doubt all elements are affected by function

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I have the following function, which works to change the arrow of an accordion when it is active (open), arrow down to reverse up, and then return to the original state, but all arrows are affected, and not just the one I'm clicking at the moment, how can I solve this? I tried using this but it did not work for this situation:

 function controlAccordeon() {
    var accordeonTitle = $('.accordeon-open-title');
    var angleDown = $('.fa-angle-down');
    var angleUp = $('.fa-angle-up');

    accordeonTitle.click(function() {
        $(this).toggleClass('active');
        angleUp.toggleClass('hide');
        angleDown.toggleClass('hide');
    });
}

jquery

asked by anonymous 11.07.2017 / 11:23

2 answers

1

The rule is: collect all but what was clicked, it gets toggle.

I suggest you still control the arrows with CSS, so you only need to change the class active and the rest "happens by itself".

Example:

function controlAccordeon() {
  var accordeonTitle = $('.accordeon-open-title');

  accordeonTitle.click(function() {
    accordeonTitle.not(this).removeClass('active');
    $(this).toggleClass('active');
  });
}

controlAccordeon();

* {
  margin: 0;
  padding: 0;
}

.accordeon-open-title {
  height: 30px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid black;
  padding: 10px;
  border-radius: 5px;
  transition: height .8s;
}

.accordeon-open-title.active {
  height: 200px;
}

/* setas */

.accordeon-open-title .fa-angle-down {
  transform: rotate(0deg);
  transition: transform 0.8s;
}

.accordeon-open-title.active .fa-angle-down {
  transform: rotate(-180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="accordeon-open-title">
  <h1>Titulo 1 <i class="fa fa-angle-down"></i></h1>
  <p>Conteúdo</p>
</div>
<div class="accordeon-open-title">
  <h1>Titulo 2 <i class="fa fa-angle-down"></i></h1>
  <p>Conteúdo</p>
</div>

11.07.2017 / 12:08

Python 2.7: Program does not run [closed] JS and HTML DIV - TAB KEY

score 1 · Accepted Answer

1

If angleDown and angleUp are daughters of accordeonTitle, just call from within the function '$ fa (angle-up', this) .toggleClass ('hide'); but without seeing html can not help much.

11.07.2017 / 12:07