hide and show content in loop php jquery

Question

Hi guys i need some help i have these code i need to show content by id after clik to show content i need to show content by the same id

    <script type="text/javascript">
    function toggleAndChangeText() {
         $('#divToToggle').toggle();
         if ($('#divToToggle').css('display') == 'none') {
              $('#aTag').html('Collapsed text mode &#9658');
         }
         else {
              $('#aTag').html('Expanded text mode &#9660');
         }
    }
 </script>

 <style>
 #divToToggle{display:none;}
 </style>

and this code php/html

          <?php 
        $stmt = $DB_con->prepare("SELECT * FROM `topic` ORDER BY id");
        $stmt->execute();   
        foreach ($stmt->fetchAll() as $row) {
        echo" 
        <div class='Post'>
        <div class='rgt Pimg'><a href='post.php?id=".$row['id']."'><img src='".$row['e_title']."' class='Pimg'/></a></div>
        <div>
        <a id='aTag' href='javascript:toggleAndChangeText()'>
           Show Content
        </a>
        <div id='divToToggle'>".$row['e_content']."</div>
        </div>
        ";
        }
      ?>

Answer 1

You cannot use same ID's for multiple elements. Use class instead:

Change your script to :

   $(document).ready(function(){
    $("a.aTag").on("click", function(){
       var toggleElement = $(this).closest("div").find(".divToToggle");
       toggleElement.toggle();
         if (toggleElement.css('display') == 'none') {
              $(this).html('Collapsed text mode &#9658');
         }
         else {
              $(this).html('Expanded text mode &#9660');
         }
    }); 

 }); 

And your PHP code to this:

 <?php 
    $stmt = $DB_con->prepare("SELECT * FROM `topic` ORDER BY id");
    $stmt->execute();   
    foreach ($stmt->fetchAll() as $row) {
    echo" 
    <div class='Post'>
    <div class='rgt Pimg'><a href='post.php?id=".$row['id']."'><img src='".$row['e_title']."' class='Pimg'/></a></div>
    <div>
    <a class='aTag' href='javascript:toggleAndChangeText()'> 
       Show Content
    </a>
    <div class='divToToggle'>".$row['e_content']."</div>
    </div>
    ";
    }
  ?>