whileループから来たときにdivを非表示にする方法

Question

whileループからdivを作成します.iは、accordion1body divを非表示にするクラスaccordion1.iをクリックします。

<?php while($timeline1=mysqli_fetch_assoc($timeline)) 
       { ?> 
    <div class="accordion-section"> 
        <div id="accordion1"> 
        <img src="images/user.jpg"> 
        <div class="triangleshape"></div> 
        <div class="tit">3rd Feb 2016 - Hospital Visit</div> 
        <div class="righticon"><i class="fa fa-angle-down"></i></div> 

        </div> 
        <div id="accordion1body"> 
         <p>The best-known type of hospital is the general hospital, which has an emergency department..</p> 
        </div> 
       </div> 
    <?php } ?> 

このスクリプトは、hide option.itに使用されていますが、最初のループでのみ動作します。 div.howに別々のIDを生成

<script> 
    $(document).ready(function() 
    { 
    $("#accordion1").click(function() 
    { 
    $("#accordion1body").slideToggle(); 
    }); 
    }); 
    </script> 

場合、私はあなたが使用する必要がある要素のグループがあるので

Answer 1

idワークとして一意の識別子、classは、グループ識別子として働いています。したがってidではなくclassを使用してください。下の例である： -

<?php while($timeline1=mysqli_fetch_assoc($timeline)) 
       { ?> 
    <div class="accordion-section"> 
        <div class="accordion1"> 
        <img src="images/user.jpg"> 
        <div class="triangleshape"></div> 
        <div class="tit">3rd Feb 2016 - Hospital Visit</div> 
        <div class="righticon"><i class="fa fa-angle-down"></i></div> 

        </div> 
        <div class="accordion1body"> 
         <p>The best-known type of hospital is the general hospital, which has an emergency department..</p> 
        </div> 
       </div> 
<?php } ?> 
<script src = "//code.jquery.com/jquery-2.2.3.min.js"></script> <!-- jquery library needed --> 
<script> 
$(document).ready(function() { 
    $(".accordion1").click(function() { //click event using class attribute 
    $(this).next(".accordion1body").slideToggle(); // hide and show corresponding `accordion1body` div on click of `accordion1` div 
    }); 
}); 
</script> 

Answer 2

はidが、それは単一の要素を識別するために使用することができるユニークである必要があり、スクリプトクリック機能を使用することができます代わりにclass

PHP：

<?php while($timeline1=mysqli_fetch_assoc($timeline)) 
       { ?> 
    <div class="accordion-section"> 
        <div class="accordion1"> 
        <img src="images/user.jpg"> 
        <div class="triangleshape"></div> 
        <div class="tit">3rd Feb 2016 - Hospital Visit</div> 
        <div class="righticon"><i class="fa fa-angle-down"></i></div> 

        </div> 
        <div class="accordion1body"> 
         <p>The best-known type of hospital is the general hospital, which has an emergency department..</p> 
        </div> 
       </div> 
<?php } ?> 

のjQuery：jQueryのに

$(document).ready(function() { 
 
    $(".accordion1").click(function() { // bind click event using class 
 
    $(this).next(, this).slideToggle(); // get the div next to clicked element 
 
    // you can simply use next() or next(".accordion1body") , second one only works when next element is `.accordion1body` 
 
    }); 
 
});