jQuery: при щелчке мыши изменить аналогичные элементы глобальным кодом

Question

У меня есть простой код, в котором, когда я нажимаю на один из «шевронов», jquery показывает скрытый контент.

Но этот код полностью для каждого отличается.

Есть ли какое-нибудь решение, как создать один глобальный код для воздействия на каждый элемент с этой функциональностью?

В моем исходном коде таких элементов больше.

Мой код:

$('.chevron1').click(function() {
  $('.more-fix-broken-links').toggleClass('active');
});
$('.chevron2').click(function() {
  $('.more-spelling-grammar').toggleClass('active');
});

img {
  width: 10px
}

.chevron {
  cursor: pointer;
}

.chevron.active {
  transform: rotate(90deg);
}

.column {
  display: flex;
  flex-direction: column;
}

.more-fix-broken-links {
  max-width: 280px;
  display: none;
}

.more-spelling-grammar {
  max-width: 280px;
  display: none;
}

.more-fix-broken-links.active {
  display: block;
  height: 100%;
}

.more-spelling-grammar.active {
  display: block;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column">
  <div>
    <input id="fix-broken-links" type="checkbox">
    <label for="fix-broken-links">Fix broken links</label>
    <img class="chevron1" src="https://supersede.space/chevron.svg" alt="Checklist chevron">
  </div>
  <div>
    <p class="more-fix-broken-links">SKuska skuskaSKuska skuskaSKuska skuskaSKuska skuskaSKuska skuska</p>
  </div>
</div>
<div class="column">
  <div>
    <input id="spelling-grammar" type="checkbox">
    <label for="spelling-grammar">Spelling & grammar</label>
    <img class="chevron2" src="https://supersede.space/chevron.svg" alt="Checklist chevron">
  </div>
  <div>
    <p class="more-spelling-grammar">SKuska skuskaSKuska skuskaSKuska skuskaSKuska skuskaSKuska skuska</p>
  </div>
</div>

Answer 1

Попробуйте использовать и родительский элемент, вот так. В моем примере использование 2 .parent() приводит вас к уровню .column, и с этого момента вы начинаете поиск тега p, используя .find('p'). Или вы можете установить определенный c класс на p элемент и искать их.

$('.chevron').click(function() {
  $(this).toggleClass('active'); // for you css .chevron.active 
  $(this).parent().parent().find('p').toggleClass('active');
});

img {
  width: 10px
}

.chevron {
  cursor: pointer;
}

.chevron.active {
  transform: rotate(90deg);
}

.column {
  display: flex;
  flex-direction: column;
}

.more-fix-broken-links {
  max-width: 280px;
  display: none;
}

.more-spelling-grammar {
  max-width: 280px;
  display: none;
}

.more-fix-broken-links.active {
  display: block;
  height: 100%;
}

.more-spelling-grammar.active {
  display: block;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column">
  <div>
    <input id="fix-broken-links" type="checkbox">
    <label for="fix-broken-links">Fix broken links</label>
    <img class="chevron" src="https://supersede.space/chevron.svg" alt="Checklist chevron">
  </div>
  <div>
    <p class="more-fix-broken-links">SKuska skuskaSKuska skuskaSKuska skuskaSKuska skuskaSKuska skuska</p>
  </div>
</div>
<div class="column">
  <div>
    <input id="spelling-grammar" type="checkbox">
    <label for="spelling-grammar">Spelling & grammar</label>
    <img class="chevron" src="https://supersede.space/chevron.svg" alt="Checklist chevron">
  </div>
  <div>
    <p class="more-spelling-grammar">SKuska skuskaSKuska skuskaSKuska skuskaSKuska skuskaSKuska skuska</p>
  </div>
</div>

Answer 2

Вы можете сохранить каждый класс и соответствующий класс абзаца в set и получить класс элемента, по которому щелкнули мышью, следующим образом:

let set = {
     'chevron1':'.more-fix-broken-links',
     'chevron2':'.more-spelling-grammar'
}
$('.chevron1, .chevron2').click(function(e) {
     $(set[e.target.className]).toggleClass('active');
});

img {
     width: 10px
}
.chevron {
     cursor: pointer;
}
.chevron.active {
     transform: rotate(90deg);
}
.column {
     display: flex;
     flex-direction: column;
}
.more-fix-broken-links {
     max-width: 280px;
     display: none;
}
.more-spelling-grammar {
     max-width: 280px;
     display: none;
}
.more-fix-broken-links.active {
     display: block;
     height: 100%;
}
.more-spelling-grammar.active {
     display: block;
     height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column">
     <div>
          <input id="fix-broken-links" type="checkbox">
          <label for="fix-broken-links">Fix broken links</label>
          <img class="chevron1" src="https://supersede.space/chevron.svg" alt="Checklist chevron">
     </div>
     <div>
          <p class="more-fix-broken-links">SKuska skuskaSKuska skuskaSKuska skuskaSKuska skuskaSKuska skuska</p>
     </div>
</div>
<div class="column">
      <div>
           <input id="spelling-grammar" type="checkbox">
           <label for="spelling-grammar">Spelling & grammar</label>
           <img class="chevron2" src="https://supersede.space/chevron.svg" alt="Checklist chevron">
      </div>
      <div>
           <p class="more-spelling-grammar">SKuska skuskaSKuska skuskaSKuska skuskaSKuska skuskaSKuska skuska</p>
      </div>
</div>