nandhakumar nandhakumar - 7 months ago 8
PHP Question

how to hide the div when its comes from while loop

the div will created from while loop.i want to click the class accordion1.i want to hide the accordion1body div.

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


This script i am used for the hide option.it will works only first loop.

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


if generate separate id for the div.how can I use script click function

Answer

id work as unique identifier in jquery, while class worked as group identifier . So use class rather than id. Below is the example:-

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