Jak zdobyć kolejne elementy przed określonego elementu za pomocą jQuery lub CSS

Question

Mam strukturę:

<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> 

Co chcę zrobić to na akordeonie. Więc dodałem display : none do wszystkich ol, ul and p w .faq-section Więc chcę wiedzieć, po kliknięciu na h4 jak wyświetlić wszystkie elementy, które następują po kliknięciu h4 przed następnym h4 tak, że wszystkie elementy przed następnym h4 jest pokazany.

Answer 1

bez zmiany znaczników, można użyć nextUntil() funkcja:

CSS:

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

jQuery

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

DEMO

Answer 2

Jeśli można zmienić znaczników HTML, można owinąć wszystkie elementy div tak:

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

i przełączyć widoczność .wrapper elementu.

jQuery

Jeśli nie można edytować znaczników można użyć jQuery nextUntil() funkcję:

$(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

można użyć tej

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

Dla porównania proszę sprawdzić ten Reference

demo Praca Demo

Answer 5

Można spróbować to:

<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> 

zobacz tutaj przykład: https://jsfiddle.net/kyfus4Ld/