Jquery - I want to only toggle class for the element whose button is click. Currently it toggles for all elements with same class

Question

I am trying to open/close elements by toggling class on click event.I am using Jquery. But on clicking all elements get opened (which have same class) however only want the one which is clicked to be opened. Here's the link to the Demo Page: http://www.lindsaysteele.com/demo-page-1 HTML Structure:

<div class="sqs-block image-block sqs-block-image sqs-text-ready" data-block-type="5" id="block-yui_3_17_2_1_1660582617675_7984">
  <div class="sqs-block-content" id="yui_3_17_2_1_1660757592153_72">
    <figure
      class="sqs-block-image-figure image-block-outer-wrapper image-block-v2 design-layout-card combination-animation-none individual-animation-none individual-text-animation-none image-position-left image-linked sqs-narrow-width sqs-text-ready menu-plugin unactive"
      data-scrolled=""
      data-test="image-block-v2-outer-wrapper"
      id="yui_3_17_2_1_1660757592153_71"
    >
      <div class="intrinsic" id="yui_3_17_2_1_1660757592153_70">
        <div class="image-inset" data-animation-role="image" data-description="" id="yui_3_17_2_1_1660757592153_69">
          <div class="sqs-image-shape-container-element content-fit" style="position: relative; overflow: hidden;" id="yui_3_17_2_1_1660757592153_68">
            <noscript><img class="sqs-image-min-height" src="https://images.squarespace-cdn.com/content/v1/52437378e4b02cd2cb2b1250/991c3f4c-e82c-45b0-9216-bc4429b1e9bb/Dumplings.jpg" alt="" loading="lazy" /></noscript>
            <img
              class="sqs-image-min-height loaded"
              data-src="https://images.squarespace-cdn.com/content/v1/52437378e4b02cd2cb2b1250/991c3f4c-e82c-45b0-9216-bc4429b1e9bb/Dumplings.jpg"
              data-image="https://images.squarespace-cdn.com/content/v1/52437378e4b02cd2cb2b1250/991c3f4c-e82c-45b0-9216-bc4429b1e9bb/Dumplings.jpg"
              data-image-dimensions="900x900"
              data-image-focal-point="0.5,0.5"
              alt=""
              loading="lazy"
              data-parent-ratio="333.0"
              style="left: 166px; top: 0px; width: 1px; height: 1px; position: absolute;"
              data-image-resolution="500w"
              src="https://images.squarespace-cdn.com/content/v1/52437378e4b02cd2cb2b1250/991c3f4c-e82c-45b0-9216-bc4429b1e9bb/Dumplings.jpg?format=500w"
            />
            <div class="image-overlay" style="overflow: hidden;"></div>
          </div>
        </div>
      </div>

      <figcaption class="image-card-wrapper" data-width-ratio="">
        <div class="image-card sqs-dynamic-text-container">
          <div class="image-title-wrapper">
            <div class="image-title sqs-dynamic-text" data-width-percentage="23.3" style="font-size: max(0.75rem, 23.3%);">
              <p class="" style="white-space: pre-wrap;"><strong>Johnny Walker Black Dumplings</strong></p>
            </div>
          </div>

          <div class="image-subtitle-wrapper">
            <div class="image-subtitle sqs-dynamic-text" data-width-percentage="23.3" style="font-size: max(0.75rem, 23.3%);">
              <p class="min-font-set" style="white-space: pre-wrap;">Local ground pork, Johnnie Walker Black Whiskey, green onion, sesame oil, sriracha aioli, sweet soy handmade by @TheRealDumplingKing.</p>
            </div>
          </div>

          <div class="image-button-wrapper photo-btn">
            <span class="item-photo-btn"><i class="br-ico"></i></span>
          </div>
        </div>
      </figcaption>
    </figure>
  </div>
</div>

The jquery code i am using:

$(function(){  
$( ".image-button-wrapper").addClass( "photo-btn");
$( ".design-layout-card").addClass( "menu-plugin");
$( ".design-layout-card").addClass( "unactive");
$( ".image-button-wrapper" ).click(function() {
 $( ".design-layout-card").toggleClass( "unactive", 1000);
})
});

Answer 1

You can do it like this:

Just create a class for the selected item and remove it from everyone just before adding it again on the clicked item.

 $(".list-item").on("click", function(){ $(".list-item").removeClass("active"); $(this).addClass("active"); });

 ul li{ padding: 6px 15px; list-style: none; margin: 5px 0px; border: 1px solid #000000; cursor: pointer; width: fit-content; } li.active{ background-color: red; color: white; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="list-item active">Option 1</li> <li class="list-item">Option 2</li> <li class="list-item">Option 3</li> <li class="list-item">Option 4</li> <li class="list-item">Option 5</li> </ul>