Div height doesn't toggle - html

Question

I'm trying to toggle div's height using jQuery.
I have this html code:
<div id="content" align="center">
<p class="welcome-message"><b><img src="./dashboard/images/website-management.png">
WEBSITEs UNDER MANAGEMENT</b></p>
<p class="welcome-message">
<!-- email account -->
</p><div id="website-acc">
<a class="dropdown-link" href="#"><p class="fb-head"><img src="./dashboard/images/acc_arr.png" style="margin-right:5px;"><b>WEBSITE </b></p></a>
<div>
<div class="dropdown-container" style="display: none;">
<table width="50%" border="0">
<tbody><tr>
<td>Website URL:</td>
<td>http://mysite.example.com/</td>
</tr>
<tr>
<td>Date of creation:</td>
<td>8/7/2012</td>
</tr>
<tr>
<td>Expiration date:</td>
<td>8/6/2013</td>
</tr>
<tr>
<td>Hosting Package:</td>
<td></td>
</tr>
</tbody></table>
</div>
</div>
</div>
<!-- end email acc-->
<p></p>
<p class="welcome-message">
<!-- email account -->
</p><div id="website-acc">
<a class="dropdown-link" href="#"><p class="fb-head"><img src="./dashboard/images/acc_arr.png" style="margin-right:5px;"><b>WEBSITE </b></p></a>
<div>
<div class="dropdown-container" style="display: none;">
<table width="50%" border="0">
<tbody><tr>
<td>Website URL:</td>
<td>http://mysite.example.com/my_hotjobsubmission</td>
</tr>
<tr>
<td>Date of creation:</td>
<td>5/31/2013</td>
</tr>
<tr>
<td>Expiration date:</td>
<td>5/31/2014</td>
</tr>
<tr>
<td>Hosting Package:</td>
<td></td>
</tr>
</tbody></table>
</div>
</div>
</div>
<!-- end email acc-->
<p></p>
<p class="welcome-message">
<!-- email account -->
</p><div id="website-acc">
<a class="dropdown-link" href="#"><p class="fb-head"><img src="./dashboard/images/acc_arr.png" style="margin-right:5px;"><b>WEBSITE </b></p></a>
<div>
<div class="dropdown-container" style="display: none;">
<table width="50%" border="0">
<tbody><tr>
<td>Website URL:</td>
<td></td>
</tr>
<tr>
<td>Date of creation:</td>
<td></td>
</tr>
<tr>
<td>Expiration date:</td>
<td></td>
</tr>
<tr>
<td>Hosting Package:</td>
<td>Awesome hosting</td>
</tr>
</tbody></table>
</div>
</div>
</div>
<!-- end email acc-->
<p></p>
<p class="welcome-message">
<!-- email account -->
</p><div id="website-acc">
<a class="dropdown-link" href="#"><p class="fb-head"><img src="./dashboard/images/acc_arr.png" style="margin-right:5px;"><b>WEBSITE </b></p></a>
<div>
<div class="dropdown-container" style="display: none;">
<table width="50%" border="0">
<tbody><tr>
<td>Website URL:</td>
<td></td>
</tr>
<tr>
<td>Date of creation:</td>
<td>08/05/2013</td>
</tr>
<tr>
<td>Expiration date:</td>
<td></td>
</tr>
<tr>
<td>Hosting Package:</td>
<td>Awesome hosting</td>
</tr>
</tbody></table>
</div>
</div>
</div>
<!-- end email acc-->
<p></p></div>
</div>
</div>
<!-- end email acc-->
<p></p>
<p class="welcome-message">
<!-- email account -->
</p><div id="website-acc">
<a class="dropdown-link" href="#"><p class="fb-head"><img src="./dashboard/images/acc_arr.png" style="margin-right:5px;"><b>WEBSITE </b></p></a>
<div>
<div class="dropdown-container" style="display: none;">
<table width="50%" border="0">
<tbody><tr>
<td>Website URL:</td>
<td>http://mysite.example.com/my_hotjobsubmission</td>
</tr>
<tr>
<td>Date of creation:</td>
<td>5/31/2013</td>
</tr>
<tr>
<td>Expiration date:</td>
<td>5/31/2014</td>
</tr>
<tr>
<td>Hosting Package:</td>
<td></td>
</tr>
</tbody></table>
</div>
</div>
</div>
<!-- end email acc-->
<p></p>
<p class="welcome-message">
<!-- email account -->
</p><div id="website-acc">
<a class="dropdown-link" href="#"><p class="fb-head"><img src="./dashboard/images/acc_arr.png" style="margin-right:5px;"><b>WEBSITE </b></p></a>
<div>
<div class="dropdown-container" style="display: none;">
<table width="50%" border="0">
<tbody><tr>
<td>Website URL:</td>
<td></td>
</tr>
<tr>
<td>Date of creation:</td>
<td></td>
</tr>
<tr>
<td>Expiration date:</td>
<td></td>
</tr>
<tr>
<td>Hosting Package:</td>
<td>Awesome hosting</td>
</tr>
</tbody></table>
</div>
</div>
</div>
<!-- end email acc-->
<p></p>
<p class="welcome-message">
<!-- email account -->
</p><div id="website-acc">
<a class="dropdown-link" href="#"><p class="fb-head"><img src="./dashboard/images/acc_arr.png" style="margin-right:5px;"><b>WEBSITE </b></p></a>
<div>
<div class="dropdown-container" style="display: none;">
<table width="50%" border="0">
<tbody><tr>
<td>Website URL:</td>
<td></td>
</tr>
<tr>
<td>Date of creation:</td>
<td>08/05/2013</td>
</tr>
<tr>
<td>Expiration date:</td>
<td></td>
</tr>
<tr>
<td>Hosting Package:</td>
<td>Awesome hosting</td>
</tr>
</tbody></table>
</div>
</div>
</div>
<!-- end email acc-->
<p></p></div>
and I'm using this JavaScript code in the head:
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function(){
var dd = $(".dropdown-container");
$("a.dropdown-link").click(function(e) {
e.preventDefault();
e.stopPropagation();
dd.hide("fast");
$(this).next().show("fast");
});
$(document).click(function() {
dd.hide();
});
dd.click(function(e) {
e.stopPropagation();
});
});
</script>
Here is a jsfiddle.
Now the problem is that div's are not showing or hiding, can anybody tell me what the problem is and how can I solve this?

Answer 1

Try this code. Actually the $(this).next() will fetch div, which is the parent of .dropdown-container. That is why .dropdown-container is not displaying
$("a.dropdown-link").click(function(e) {
e.preventDefault();
e.stopPropagation();
dd.hide("fast");
$(this).next().find('.dropdown-container').show();
});
JS Fiddle demo
http://jsfiddle.net/t7FL9/1/