expanding div - only want the clicked div to expan

2019-08-29 13:30发布

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

标签: jquery html echo
2条回答
\"骚年 ilove
2楼-- · 2019-08-29 14:00

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 "+"
    });    
});
查看更多
老娘就宠你
3楼-- · 2019-08-29 14:19

probably because you are expanding the whole .class instead of the unique #id of the clicked div.

about your comment

okay thankyou for clearing this up, do you know how i could add a count function in to the div id name so that it would work?

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

查看更多
登录 后发表回答