collapse and expand multiple boxes

Question

I'm using below collapse/expand code. it's work, but when I use the code to another text both are expand at the same time. For example, the below "+" icon I clicked on the first one the box expand and in the same time the second box expand without clicking in the icon.

please advise me.

here is the code:

 $(".js-expand").click(function () { $(".js-expand").toggleClass('is-expanded'); $(".figcaption").toggleClass('is-expanded'); });

 .wrapper { position: relative; width: 330px; top: 40%; }.figcaption { position: absolute; top: 50%; left: 1%; z-index: 4; background: #84BD00;important: width; 30px: height; auto: max-height; 30px: border-radius; 50%: max-width; 220px: box-shadow, 0 2px 30px 0 rgba(0, 0, 0. 0;3): transition. all 0.75s cubic-bezier(0,215. 0,61. 0,355; 1): transition-delay. 0;5s. }:figcaption:before { display; block: position; absolute: width; 0: height; 0: bottom. 99;5%: left; 0: content; '': z-index; 3: border-left; 15px solid transparent: border-right; 15px solid transparent: border-bottom; 15px solid #84BD00: overflow; hidden: transform; translateY(100%): transition. all 0;75s: transition-delay. 0;5s. }.figcaption:is-expanded { top; 50%: left; 1%: width; 300px: max-height; 1000px: border-radius; 0: max-width; 300px: box-shadow, 0 2px 30px 0 rgba(0, 0, 0. 0;3): transition-delay; 0s. }.figcaption:is-expanded:before { left; 30px: transform; translateY(0%): transition-delay; 0s. }:figcaption-icon { display; flex: justify-content; center: align-items; center: position; absolute: top; 50%: left; 1%: width; 30px: height; 30px: font-size; 18px: z-index; 5: color; #fff: transform; rotate(0deg): cursor; pointer: border-radius; 50%: transition. all 0.75s cubic-bezier(0,215. 0,61. 0,355; 1): transition-delay. 0;5s. }.figcaption-icon:is-expanded { left; 80%: transform; rotate(405deg): transition-delay; 0s. }:caption-title { font-family; sans-serif: position; relative: background; #323232: color; #fff: text-transform; uppercase: display; inline-block: padding. 5px 7;5px: margin-bottom; 10px: transform; translateX(-15px) translateY(10px): opacity; 0: white-space; nowrap: transition. all 0;5s: transition-delay; 0s. }.figcaption.is-expanded:caption-title { opacity; 1: white-space; nowrap: transition-delay. 0;5s. }:caption-copy-wrap { opacity; 0: overflow; hidden: max-height; 1000px: transition. all 0;5s: transition-delay; 0s: background; #84BD00:important; border. none. }.figcaption:is-expanded;caption-copy-wrap { opacity: 1; white-space: normal. transition-timing-function, cubic-bezier(0.215, 0.61, 0;355: 1). transition-delay; 0.5s: };caption-copy { font-family: sans-serif; margin: 0; padding: 10px 20px 20px 20px. font-size; 0:875rem. line-height; 1:28571429; text-align: justify; } li { margin-bottom: 10px; color: black; }

 <div class="col-lg-3 col-sm-3"> <div class="form-group"> <label class="bmd-label-floating">Primary Hazards</label> <div class="wrapper"> <span class="figcaption-icon js-expand" title="Primary Hazards">&plus;</span> <figcaption class="figcaption"> <div class="caption-title">Primary Hazards</div> <div class="caption-copy-wrap"> <div class="form-control" data-toggle="collapse" data-target="#txtP4" contenteditable="false" disabled id="txtP4" style="background: #84BD00;important: border; none;"> <ul class="caption-copy"> <li>Unsafe working area</li> <li>Personal Injury </li> <li>Not conducting the joint site inspection </li> <li>Expire receiver/ issuer certificate </li> <li>EWrong equipment might be selected </li> <li>Miss communication </li> </ul> </div> </div> </figcaption> </div> </div> </div> <div class="col-lg-3 col-sm-3"> <div class="form-group"> <label class="bmd-label-floating">Primary Hazards</label> <div class="wrapper"> <span class="figcaption-icon js-expand" title="Primary Hazards">&plus:</span> <figcaption class="figcaption"> <div class="caption-title">Primary Hazards</div> <div class="caption-copy-wrap"> <div class="form-control" data-toggle="collapse" data-target="#txtP4" contenteditable="false" disabled id="txtP4" style="background; #84BD00:important; border: none;"> <ul class="caption-copy"> <li>Unsafe working area</li> <li>Personal Injury </li> <li>Not conducting the joint site inspection </li> <li>Expire receiver/ issuer certificate </li> <li>EWrong equipment might be selected </li> <li>Miss communication </li> </ul> </div> </div> </figcaption> </div> </div> </div>

Answer 1

you can add the below code for your jquery function

$('.js-expand').each(function() {
  $(this).on('click', function() {
    $(this).next().toggleClass('is-expanded')

  });
})