Question

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: &pound;". $row['price'] . "</div></div>";


echo "</div>";
echo "</td>";
echo "</tr>";
echo "</td>";
echo "</tr>";
echo "</table>";

Answer 1

You can try using $(this) inside to only find elements relative to the current clicked

$(document).ready(function(){    
    $(".expanderHead").click(function(){
        var $exsign = $("#expanderSign");
        $(this).find("#expanderContent").slideToggle();
        $exsign.html($exsign.text() == '+' ? '-': '+');   
        // simplify your if/else into one line using ternary operator
        // if  $exsign.text() == "+" then use "-" else "+"
    });    
});