I have results echo'ed from a database, i have included jquery expand code to expand the div when the title is clicked, however currently when a title of one result is clicked, all of the other echo'ed divs expand.
Could someone help me to make it so that only the clicked div expands. Thankyou for any help or advice!
this is the script:
<script type="text/javascript">
$(document).ready(function(){
$(".expanderHead").click(function(){
$("#expanderContent").slideToggle();
if ($("#expanderSign").text() == "+"){
$("#expanderSign").html("−")
}
else {
$("#expanderSign").text("+")
}
});
});
</script>
this is the echo statement:
echo "<table width='50%' style='border-bottom:1px solid #000000;'";
echo "<tr>";
echo "<td>";
echo "<div id='page-wrap'>";
echo "<div class='discounted-item freeshipping'>";
echo "<a href='./img/users/" . $row['category'] . "/" . $row['username'] . "/" . $row['filename'] . "' rel='lightbox'><img src=\"./img/users/" . $row['category'] . "/" . $row['username'] . "/" . $row['filename'] . "\" alt=\"\" width='15%' height='80%' /></a>";
echo "<div id='expanderHead'>";
echo "<div class='reasonbar'><div class='prod-title' style='width: 70%;'>" .$row['fname'] . "</div><div class='reason' style='width: 29%;'><b>". $row['firstname'] . " " . $row['surname'] ."</b></div></div>";
echo "<div id='expanderContent' style='display:none'><div class='reasonbar'><div class='prod-title1' style='width: 70%;'>" . $row['lname'] . "</div><div class='reason1' style='width: 29%;'>Category:<br /> ". $row['category'] . "</div></div></div>";
echo "<div class='reasonbar'><div class='prod-title2' style='width: 70%;'><a href='#' data-reveal-id='myModal".$count."'>Click here For more info</a></div><div class='reason2' style='width: 29%;'>Price: £". $row['price'] . "</div></div>";
echo "</div>";
echo "</td>";
echo "</tr>";
echo "</td>";
echo "</tr>";
echo "</table>";
You can try using $(this) inside to only find elements relative to the current clicked
probably because you are expanding the whole
.class
instead of the unique#id
of the clickeddiv
.about your comment
see if this can help you:
dynamic id with php
http://perishablepress.com/dynamic-body-class-id-php-wordpress/
dynamic id with jquery
jQuery selection with dynamic id's