Több DIV nyitása-csukása jQuery-vel
Üdv,
a következővel küzdöm.
Van egymás után 4 "h3" címsorom. Mindegyik után egy vagy több "div"-em, amiket más okból nem tudok egy közös "div" alá rendelni.
Azt szeretném jQuery-vel elérni, hogy ha egy "h3"-ra kattintok, akkor azok a "div"-ek, amik utána következnek a következő "h3"-ig, mind láthatóvá váljanak, az összes többi meg becsukódjon.
Van egy mintakódom, ami majdnem jól csinálja, mindössze az a baj, hogy az összes "div" helyett csak az elsőt teszi láthatóvá.
Mit rontok el?
Köszönöm!
■ a következővel küzdöm.
Van egymás után 4 "h3" címsorom. Mindegyik után egy vagy több "div"-em, amiket más okból nem tudok egy közös "div" alá rendelni.
Azt szeretném jQuery-vel elérni, hogy ha egy "h3"-ra kattintok, akkor azok a "div"-ek, amik utána következnek a következő "h3"-ig, mind láthatóvá váljanak, az összes többi meg becsukódjon.
Van egy mintakódom, ami majdnem jól csinálja, mindössze az a baj, hogy az összes "div" helyett csak az elsőt teszi láthatóvá.
<html>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function() {
$("p").hide();
$("h3").click(function() {
$(this).nextAll().each( function() {
if ($(this).filter("h3").length) {
return false;
}
$(this).filter("p").slideToggle("slow").siblings("p").slideUp("slow");
});
});
});
</script>
<body>
<h3>The First Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>
<h3>The Second Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>
<h3>The Third Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>
<h3>The Fourth Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>
</body>
</html>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function() {
$("p").hide();
$("h3").click(function() {
$(this).nextAll().each( function() {
if ($(this).filter("h3").length) {
return false;
}
$(this).filter("p").slideToggle("slow").siblings("p").slideUp("slow");
});
});
});
</script>
<body>
<h3>The First Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>
<h3>The Second Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>
<h3>The Third Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>
<h3>The Fourth Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>
</body>
</html>
Mit rontok el?
Köszönöm!
Egy megvalósítás
Hálám
Nagyszerűen működik, és bőven ad ötletet!
P.