How to get next 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>

What I want to do is make an accordion. So I added display : none to all the ol, ul and p in .faq-section So I want to know when clicking on h4 how to display all the elements that follow the clicked h4 before the next h4 so that all the elements before the next h4 is shown.

Answer 1

Without changing your markup, you could 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 could wrap all the elements in a div like so:

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

and toggle the visibility of .wrapper element.

jQuery

If you cannot edit the markup you can use 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>