RomeScape

Programming => HTML => Topic started by: Mazead on October 17, 2014, 05:32:07 am



Title: Need help with my drop downs
Post by: Mazead on October 17, 2014, 05:32:07 am
I'm having a little issue, I've making drop downs for a site I'm currently designing, but when I click one drop down the title next to it moves down with the menu, also when I click another drop down with one already open, the current one doesn't scroll back up, meaning all drop down cam be open at once which I obviously don't need, here's my code:

<HTML>
<HEAD>
<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".links_body").hide();
$(".links_head").click(function(){
$(this).next(".links_body").slideToggle('fast');
}); }); </script>
<style type="text/css">
.links_list { margin:0px; padding:0px; width:180px;}
.links_head { padding-top:5px; padding-bottom:5px; cursor:pointer; position:relative; margin:1px; text-align:center;}
.links_body { padding:10px; text-align:left; color: #fff; display:none;}
</style>
</HEAD>
<BODY>
<table style="width:20%">
<td>
<div class="links_list">
<p class="links_head">Posters</p>
<div class="links_body">
<center>
<ul>
<li> <a href="LINK URL">Pre 1930's</a> </li>
<li> <a href="LINK URL">Pre 1930's</a> </li>
<li> <a href="LINK URL">Pre 1930's</a> </li>
</center>
</div></div>
</td>
<td>
<div class="links_list">
<p class="links_head">Posters</p>
<div class="links_body">
<center>
<ul>
<li> <a href="LINK URL">Pre 1930's</a> </li>
<li> <a href="LINK URL">Pre 1930's</a> </li>
<li> <a href="LINK URL">Pre 1930's</a> </li>
</center>
</div></div>
</td>
<td>
<div class="links_list">
<p class="links_head">Posters</p>
<div class="links_body">
<center>
<ul>
<li> <a href="LINK URL">Pre 1930's</a> </li>
<li> <a href="LINK URL">Pre 1930's</a> </li>
<li> <a href="LINK URL">Pre 1930's</a> </li>
</center>
</div></div>
</td>
</table>


</BODY>
</HTML>

Thanks for any help