title: How can you make multiple toggles for one accordion?
body: <p>I have a product feature map I'm trying to create. I was able to get the accordions working, but how can I make the "+" buttons on the product image also trigger the corresponding accordion?</p>
  
  <p><a href="https://jsfiddle.net/rza4hs16/1/" rel="nofollow noreferrer">https://jsfiddle.net/rza4hs16/1/</a></p>
  
  <p>Here is some of my copied code from the jsfiddle:</p>
  
  <pre><code>
  &lt;div class="accordion-toggle"&gt;
  &lt;div class="map-container"&gt;
  &lt;img src="https://i.imgur.com/quhRUKx.jpg" width="500px"&gt;
  &lt;a id="map-marker-1" class="map-marker" href="#"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="accordion-container"&gt;
    &lt;div class="set"&gt;
      &lt;a href="#"&gt;
     Accordion 1
        &lt;i class="fa fa-plus"&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;div class="content"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jquery:</p>
  
  <pre><code>$(document).ready(function() {
    $(".set &gt; a").on("click", function() {
      if ($(this).hasClass("active")) {
        $(this).removeClass("active");
        $(this)
          .siblings(".content")
          .slideUp(200);
        $(".set &gt; a i")
          .removeClass("fa-minus")
          .addClass("fa-plus");
      } else {
        $(".set &gt; a i")
          .removeClass("fa-minus")
          .addClass("fa-plus");
        $(this)
          .find("i")
          .removeClass("fa-plus")
          .addClass("fa-minus");
        $(".set &gt; a").removeClass("active");
        $(this).addClass("active");
        $(".content").slideUp(200);
        $(this)
          .siblings(".content")
          .slideDown(200);
      }
    });
  });
  
  </code></pre>