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: £". $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;}
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?