How to get the following elements before a specific element using jQuery or CSS

Question

I have a structure:

<div class="faq-section"> <h4>1. Wie reserviere ich mir einen Platz, wenn ich einen Gutschein habe?</h4> <p>Es gibt für Gutscheinbesitzer 2 Wege um sich einen Platz am Himmel bei uns zu reservieren.</p> <ul> <li>Sie können sich telefonisch Mo-Fr 09.00-17.00 Uhr unter <strong>056 667 27 08 </strong>oder</li> <li>Sie nutzen unser elektronisches Reservationsformular, welches Sie <a title="Reservation" href="34-0-Reservation.html"> hier </a>finden.</li> </ul> <h4>2. Wie lange dauert eine Ballonfahrt?</h4> <p>Je nach Angebot das Sie wählen hat eine Ballonfahrt unterschiedliche Dauer in der Luft. Der Ablauf VOR- und NACH-&nbsp; der Ballonfahrt ist jedoch immer der Selbe.</p> <ol> <li>Fahrt vom Treffpunkt zum Startplatz (ca. 0,5 h)</li> <li>Aufbau des Ballons vor dem Start (ca. 0,5 h)</li> <li>Fahrt mit dem Heissluftballon (je nach Ihrer Wahl der Ballonfahrt )</li> <li>Verpacken des Ballons nach der Landung &nbsp;und Ballonfahrertaufe mit Champagner und persönlichem Zertifikat (ca. 0,5 h) </li> <li>kostenlose Rückfahrt vom Landeplatz zum Ausgangspunkt (ca. 0,5 h)</li> </ol> </div> 

I want to make an accordion. So I added display : none to all ol, ul and p in .faq-section Therefore, I want to know when you click on h4 how to display all the elements that follow the h4 click before the next h4 so that all the elements are displayed until the next h4 .

Answer 1

Without changing the markup, you can use the nextUntil() function:

CSS

 .faq-section>*:not(h4) { display: none; } 

JQuery

 $(function() { $('.faq-section h4').on('click', function() { $(this).nextUntil('h4').toggle(); }); }); 

Demo

Answer 2

If you can change the html markup, you can wrap all the elements in a div like this:

 <h4>First</h4> <div class='wrapper'> <p>Par</p> <ul> <li>list</li> </ul> </div> <h4>Second</h4> ..... 

and switch the visibility of the .wrapper element.

JQuery

If you cannot edit the markup, you can use the jquery nextUntil() function:

 $(document).on('click', 'h4', function() { $('ul, ol, p').removeClass('vis'); $(this).nextUntil('h4').addClass('vis'); }); 

 p,ul,ol { display:none } p.vis,ul.vis,ol.vis { display:initial } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="faq-section"> <h4>1. Wie reserviere ich mir einen Platz, wenn ich einen Gutschein habe?</h4> <p>Es gibt für Gutscheinbesitzer 2 Wege um sich einen Platz am Himmel bei uns zu reservieren.</p> <ul> <li>Sie können sich telefonisch Mo-Fr 09.00-17.00 Uhr unter <strong>056 667 27 08 </strong>oder</li> <li>Sie nutzen unser elektronisches Reservationsformular, welches Sie <a title="Reservation" href="34-0-Reservation.html"> hier </a>finden.</li> </ul> <h4>2. Wie lange dauert eine Ballonfahrt?</h4> <p>Je nach Angebot das Sie wählen hat eine Ballonfahrt unterschiedliche Dauer in der Luft. Der Ablauf VOR- und NACH-&nbsp; der Ballonfahrt ist jedoch immer der Selbe.</p> <ol> <li>Fahrt vom Treffpunkt zum Startplatz (ca. 0,5 h)</li> <li>Aufbau des Ballons vor dem Start (ca. 0,5 h)</li> <li>Fahrt mit dem Heissluftballon (je nach Ihrer Wahl der Ballonfahrt )</li> <li>Verpacken des Ballons nach der Landung &nbsp;und Ballonfahrertaufe mit Champagner und persönlichem Zertifikat (ca. 0,5 h) </li> <li>kostenlose Rückfahrt vom Landeplatz zum Ausgangspunkt (ca. 0,5 h)</li> </ol> </div> 

Answer 3

 $("h4").click(function(){ $("p").hide(); $("ul").hide(); $(this).next("p").show(); $(this).next("ul").show(); }) 

Answer 4

you can use this

 $(function(){ $( "h4" ).on('click', function() { $(this).nextUntil( "h4" ).show(); }) }); 

For reference, please check Help

Working Demo Demo

Answer 5

You can try the following:

 <div class="faq-section"> <div class="accordion"> <h4 class="accordion-header" style="cursor:pointer;">1. Wie reserviere ich mir einen Platz, wenn ich einen Gutschein habe?</h4> <div class="collapsible" style="display:none"> <p>Es gibt für Gutscheinbesitzer 2 Wege um sich einen Platz am Himmel bei uns zu reservieren.</p> <ul> <li>Sie können sich telefonisch Mo-Fr 09.00-17.00 Uhr unter <strong>056 667 27 08 </strong>oder</li> <li>Sie nutzen unser elektronisches Reservationsformular, welches Sie <a title="Reservation" href="34-0-Reservation.html"> hier </a>finden.</li> </ul> </div> </div> <div class="accordion"> <h4 class="accordion-header" style="cursor:pointer;">2. Wie lange dauert eine Ballonfahrt?</h4> <div class="collapsible" style="display:none"> <p>Je nach Angebot das Sie wählen hat eine Ballonfahrt unterschiedliche Dauer in der Luft. Der Ablauf VOR- und NACH-&nbsp; der Ballonfahrt ist jedoch immer der Selbe.</p> <ol> <li>Fahrt vom Treffpunkt zum Startplatz (ca. 0,5 h)</li> <li>Aufbau des Ballons vor dem Start (ca. 0,5 h)</li> <li>Fahrt mit dem Heissluftballon (je nach Ihrer Wahl der Ballonfahrt )</li> <li>Verpacken des Ballons nach der Landung &nbsp;und Ballonfahrertaufe mit Champagner und persönlichem Zertifikat (ca. 0,5 h) </li> <li>kostenlose Rückfahrt vom Landeplatz zum Ausgangspunkt (ca. 0,5 h)</li> </ol> </div> </div> </div> <script> $(document).ready(function(){ $(".accordion-header").click(function(){ $(this).next().toggle(); }); }); </script> 

See an example here: https://jsfiddle.net/kyfus4Ld/