Come ottenere prossimi elementi prima di uno specifico elemento utilizzando jQuery o CSS

Question

ho una struttura:

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

Quello che voglio fare è fare una fisarmonica. Quindi ho aggiunto display : none a tutti gli ol, ul and p in .faq-section Quindi voglio sapere quando clichiamo su h4 come visualizzare tutti gli elementi che seguono il h4 cliccato prima del prossimo h4 in modo che tutti gli elementi prima del prossimo h4 siano mostrati.

Answer 1

Senza cambiare il vostro codice, è possibile utilizzare il nextUntil() funzione:

CSS:

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

jQuery

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

DEMO

Answer 2

Se è possibile modificare il codice HTML, si potrebbe avvolgere tutti gli elementi in un div in questo modo:

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

e commutare la visibilità di .wrapper elemento.

jQuery

Se non è possibile modificare il markup è possibile utilizzare jQuery nextUntil() funzione:

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

è possibile utilizzare questo

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

Per riferimento si prega di controllare questo Reference

demo funzionante Demo

Answer 5

Si può provare questo:

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

vedi qui un esempio: https://jsfiddle.net/kyfus4Ld/