hide and show content in loop php jquery - php

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