Как вы можете сделать несколько активных переключателей для одного аккордеона?

Question

У меня есть карта возможностей продукта, которую я пытаюсь создать. Мне удалось заставить работать аккордеоны и переключатели для запуска аккордеона, но как я могу также установить активный статус на «+». Я настроил это здесь: https://jsfiddle.net/oz45ajq1/ Я надеюсь, что когда нажата кнопка «+» или нажата гармошка, обновится соответствующий «+» и аккордеон станет активным. Поэтому, если кто-то нажимает на аккордеон, знак «+» изменится и покажет пользователю, где эта функция находится в продукте.

Вот код из моей скрипты js:

<div class="accordion-toggle">
<div class="map-container">
<img src="https://i.imgur.com/quhRUKx.jpg" width="500px">
<a id="map-marker-1" class="map-marker active" href="#" onclick='$("#acc1").click()'><i class="fa fa-plus"></i></a>
<a id="map-marker-2" class="map-marker" href="#" onclick='$("#acc2").click()'><i class="fa fa-plus"></i></a>
<a id="map-marker-3" class="map-marker" href="#" onclick='$("#acc3").click()'><i class="fa fa-plus"></i></a>
<a id="map-marker-4" class="map-marker" href="#" onclick='$("#acc4").click()'><i class="fa fa-plus"></i></a>
</div>

Answer 1

РЕДАКТИРОВАТЬ: Измените свой код JS на это: Это должно быть то, что вы ищете с точки зрения функциональности. Это не лучший код, но он должен дать вам то, что вы хотите.

$(document).ready(function() {
  $(".set > a, .fa fa-plus").on("click", function() {
    if ($(this).hasClass("active")) {
      $(this).removeClass("active");
      $(this)
        .siblings(".content")
        .slideUp(200);
      $(".set > a i")
        .removeClass("fa-minus")
        .addClass("fa-plus");
    } else {
      $(".set > a i")
        .removeClass("fa-minus")
        .addClass("fa-plus");
      $(this)
        .find("i")
        .removeClass("fa-plus")
        .addClass("fa-minus");
      $(".set > a").removeClass("active");
      $(this).addClass("active");
      $(".content").slideUp(200);
      $(this)
        .siblings(".content")
        .slideDown(200);
    }
  });
            $(document).on('click','.map-marker', function(){
      $(this).each(function(){
      $('#map-marker-1').removeClass('active');
      $('#map-marker-2').removeClass('active');
      $('#map-marker-3').removeClass('active');
      $('#map-marker-4').removeClass('active');
        if($(this).hasClass('active')){
              $(this).removeClass('active');
        }
        else{
              $(this).addClass('active');
                }
            });
        });

    $(document).on('click','.set > a', function(){
      $(this).each(function(){
      var accrIdNum = $(this).attr('id').replace('acc','');
      $('.map-marker').each(function(){
      var plusSignIdNum = $(this).attr('id').replace('map-marker-','');
      if(accrIdNum === plusSignIdNum){
          $(this).addClass('active');
      }
      else{
          $(this).removeClass('active');
      }
      });
    });
  });
});