jQuery: оставить затронутым только последний нажатый элемент

Question

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

Эти элементы во всем моем коде у меня 2.

Теперь вопрос, есть ли какое-нибудь решение, как сохранить затронутый только последний нажатый элемент?

Итак, когда я нажимаю на первый, будет отображаться первый скрытый контент, а когда я нажимаю на второй элемент, который, как второй скрытый контент первым, будет снова скрыт.

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

.chevron {
  cursor: pointer;
  width: 10px;
}

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

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

p {
  max-width: 280px;
  display: none;
}

p.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>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>SKuska skuskaSKuska skuskaSKuska skuskaSKuska skuskaSKuska skuska</p>
  </div>
</div>

Answer 1

Вы можете сделать это, удалив класс active из .chevron или любого тега p, который ранее имел активный класс, например:

var $ptag = $(this).closest('.column').find('p');
$('.chevron.active').not(this).removeClass('active');
$('p.active').not($ptag).removeClass('active');

Демо:

$('.chevron').click(function() {

  var $ptag = $(this).closest('.column').find('p');
  $('.chevron.active').not(this).removeClass('active');
  $('p.active').not($ptag).removeClass('active');

  $(this).toggleClass('active'); // for you css .chevron.active
  $ptag.toggleClass('active');
});

.chevron {
  cursor: pointer;
  width: 10px;
}

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

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

p {
  max-width: 280px;
  display: none;
}

p.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>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>SKuska skuskaSKuska skuskaSKuska skuskaSKuska skuskaSKuska skuska</p>
  </div>
</div>

Answer 2

Если я правильно понял, в случае, если у вас открыт один шеврон, а вы пытаетесь открыть другой, первый должен быть закрыт. В этом случае вы можете добиться этого, закрыв все шевроны перед открытием нужного шеврона, быстрая настройка будет:

$('.chevron').click(function() {
  $('.active').removeClass('active'); //close all of them
  $(this).addClass('active'); // activate what you need  
  $(this).parent().parent().find('p').addClass('active');
});

Более быстрый код потребует от вас сохранить активированные элементы и закрыть их вместо сканирование всего DOM, оставляю это вам.