jQuery On click, slideToggle next() div

Question

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>

Answer 1

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>