CODEWITHSUNDEEP
javascriptphp
Nandhakumar
Nandhakumar

Reputation: 92

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

Upvotes: 2

Views: 73

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115212

The id should be unique it can be used for identifying single element, since there is group of elements you need to use class instead here.

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 :

$(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`
  });
});

Upvotes: 1

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72289

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>

Upvotes: 2

Related Questions