jQuery On click, slideToggle next() div

August 3, 2022

I have tried to create an accordion system where the accordions have a header and a content block below.
onClick of the header, the content should slide up or down(toggled).

However, I have implemented a highlighting border for some initial tips, but this is in between the two div elements (the highlighting border is an SVG element.)

I have tried using $(this).parent().next() etc. with no luck. Is it possible to get the next sibling of type div, or will it need to be done with unique ids?

$(".accordion").on("click", function() {
  $(this).toggleClass("open");
  $(this).next(".accordion-content").slideToggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion open"><span>Styles</span>
  <div class="info-btn"><i class="fas fa-info"></i></div>
  <span class="accordion-plus-minus"><i class="fal fa-plus"></i><i class="fal fa-minus"></i></span></div>

<svg id="style-tip-highlight" xmlns="http://www.w3.org/2000/svg"></svg>
<div class="accordion-content" id="style-accordion"></div>

>Solution :

Add another .next()

$(this).next().next(".accordion-content").slideToggle();

$(".accordion").on("click", function() {
  $(this).toggleClass("open");
  $(this).next().next(".accordion-content").slideToggle();
});

<div class="accordion open"><span>Styles</span>
  <div class="info-btn"><i class="fas fa-info"></i></div>
  <span class="accordion-plus-minus"><i class="fal fa-plus"></i><i class="fal fa-minus"></i></span></div>
<svg id="style-tip-highlight" xmlns="http://www.w3.org/2000/svg"></svg>
<div class="accordion-content" id="style-accordion">
  Content
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>