Question

I have a jQuery script with expands a div in a table on click, however the table row doesn’t expand with the div!

Any help much appreciated,

this is my Jquery:

<script type="text/javascript">
 $(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 "+"
    });    
});
</script>

This is my table code:

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 class='expanderHead'>";

echo "<div class='reasonbar'><div class='prod-title'>" .$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='#'>Click here For more info</a></div><div class='reason2' style='width: 29%;'>Price: &pound;". $row['price'] . "</div></div>";




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

this is my CSS:

.discounted-item            { width: 100%; position: relative; cursor: pointer;
                          height: 90px; }
.discounted-item:hover { background-color:#FC6;}

.discounted-item img        { position: absolute; top: 0; left: 0; }
.freeshipping .reasonbar    { background: url(); }
.freeshipping               { background: ; }
.reasonbar                  { padding: 4px 0 4px 175px; overflow: hidden;
                          width: 515px; color: black; font-size: 10px; }
.reason                     { width: 49%; float: right; text-align: right; text-transform: uppercase; 
                          letter-spacing: 2px; padding: 0 5px 0 0; font-size: 10px; }
.reason1                     { float: right; text-align: right; text-transform: uppercase; 
                          letter-spacing: 2px; }
.reason2                     { float: right; text-align: right; text-transform: uppercase; 
                            letter-spacing: 2px; font-family: Tahoma, Geneva, sans-serif; font-style: italic; font-size: 14px;}
.reason3                     { float: right; text-align: right; text-transform: uppercase; 
                          letter-spacing: 2px; font-family: Tahoma, Geneva, sans-serif; font-style: italic; font-size:12px; }

.prod-title                 { width: 49%;  float: left; font: bold 14px Helvetica, Sans-Serif; }
.prod-title1                 { width: 49%; height: 90px; float: left; font: 12px "Lucida Grande", Arial, Sans-Serif;  }
.prod-title2                 { width: 49%; height: 20px; float: left; font: 18px "Lucida Grande", Arial, Sans-Serif; text-overflow:ellipsis; overflow:hidden; white-space:normal;  }
.prod-title2                 { width: 49%; height: 20px; float: left; font: 18px "Lucida Grande", Arial, Sans-Serif; text-overflow:ellipsis; overflow:hidden; white-space:normal;  }

.discount-bar               { width: 59%; height: 70px; background-color:yellow; padding: 10px 0 10px 150px; font: 18px "Lucida Grande", Arial, Sans-Serif; text-overflow:ellipsis; overflow:hidden; white-space:normal;}

Answer 1

As far as I can see, the code is working properly-the div “expanderContent” expands and also changes its dimensions. Which browser are you performing the tests?