Question

I pulled a (working) jquery dropdown from some website and I don’t really understand why it’s not working for my page, here’s my code:

Head

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery(".hidden").hide();
  //toggle the componenet with class msg_body
  jQuery(".row").click(function()
  {
    jQuery(this).next(".hidden").slideToggle(500);
  });
});
</script>


Body:
    <div id="likelyToBeWarned">
    <div id="likelyOddHeader" class="row">
        <div id="likelyOddA" class="left">Test</div>
        <div id="LikelyOddB" class="middle"><img class="middle" src="image002.png"/></div>
        <div id="timeZone" class="right">West</div>
        <div id ="rows" class="hidden">
            <div id="weights" class="left">Weights:</div>
            <div id="values" class="middle">ValueA:1234  ValueB:12345 ValueC:123456 ValueD:7654321</div>
            <div id="dbWeights" class="right">dbWeightA: 1234 dbWeightB:12345 dbWeightC:123456 dbWeightD:7654321</div>
        </div>



style/css

.hidden{
 position:relative;
 display: table-row;
 height:45px;
 margin-left:auto;
 margin-right:auto;
}

.left{
    display: table-cell;
}

.right{
display: table-cell;
}

.middle{
display: table-cell;
cursor:pointer;
}
.row{
 display: table-row;
 height:45px;
 margin-left:auto;
 margin-right:auto;
}

Edit: The idea is to show the “hidden” div as a drop down of the “likelyOddHeader” div.

Thanks for any help.

Answer 1

You are missing a closing div in your HTML code

<div id="likelyOddHeader" class="row">
    <div id="likelyOddA" class="left">Test</div>
    <div id="LikelyOddB" class="middle">blablah</div>
    <div id="timeZone" class="right">West</div>
</div> <---------------------------HERE 
<div id ="rows" class="hidden">
        <div id="weights" class="left">Weights:</div>
        <div id="values" class="middle">ValueA:1234  ValueB:12345 ValueC:123456 ValueD:7654321</div>
        <div id="dbWeights" class="right">dbWeightA: 1234 dbWeightB:12345 dbWeightC:123456 dbWeightD:7654321</div>
</div>​

I added that div in the fiddle and it works fine http://jsfiddle.net/CZjZs/1/