CODEWITHSUNDEEP
jquery
rex
rex

Reputation: 1025

jQuery slide toggle not working properly

Created a side nav with toggle but it not pushing the text that is underneath it. I modified the code that I found in http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/. I cannot modify the body content/tag or the jQuery version (It's a very closed system. However, I can modify the css with in script tags). It is doing what I wanted to do, however it is not pushing the text as it was on the original tutorial. What am I missing?

Thanks in advance. 

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){

//Hide (Collapse) the toggle containers on load
$("#linkListSub3 li ul").hide(); 

//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$("#linkListSub3 li").click(function(){
    $(this).toggleClass("active");
    $("ul",this).slideToggle("slow");

    return false; //Prevent the browser jump to the link anchor
});
});
</script>


<style type="text/css">

body {
background-color:#333;
font-family:Arial, Helvetica, sans-serif;
}

ul{
margin:0;
padding:0;
}

li{
margin:0;
padding:0;
list-style:none;
}


#linkList3{
background-color:#4f90b0;
width:200px;
padding:10px;
}

#linkListSub3 li {
height: 35px;
line-height: 35px;
width: 200px;
font-size: .9em;
font-weight: normal;
float: left;
}

#linkListSub3 li a {
color: #fff;
text-decoration: none;
display: block;
}

#linkListSub3 li a:hover {
color: #ccc;
}

#linkListSub3 li.active {
background-color:#444;

} 

#linkListSub3 li a.submenu {

border-top: 1px solid #d6d6d6;
background-color:#444;
overflow: hidden;
font-size: .8em;
width:200px;
clear: both;
} 

</style>

</head>


<body>
<div id="linkList3" style="width: 200px; height: 1000px; ">
<div id="linkListSub3" style="width: 200px;">

<ul style="width: 200px">
  <li id="id-30683"><a href="/Section.aspx?id=31" target="_self"><span id="navArrow">&nbsp;&nbsp;&nbsp;&nbsp;</span>About</a>
    <ul style="margin-left:0px;">
      <li id="id-30692"><a href="/Section.aspx?id=31" class="submenu" target="_self">About Us</a></li>
      <li id="id-30693"><a href="/what-we-do.aspx" class="submenu" target="_self">What We Do</a></li>

    </ul>
  </li>


  <li id="id-30684"><a href="/Section.aspx?id=2820" target="_self"><span id="navArrow">&nbsp;&nbsp;&nbsp;&nbsp;</span>Social Justice</a>
    <ul style="margin-left:0px;">
      <li id="id-30699"><a href="/Section.aspx?id=2820" class="submenu" target="_self">Overview</a></li>
      <li id="id-30700"><a href="/page.aspx?id=222013" class="submenu" target="_self">Economic Response</a></li>
    </ul>
  </li>



</ul>
</div>
</div>

Upvotes: 1

Views: 4273

Answers (2)

Connell
Connell

Reputation: 14411

The problem is that your parent li tags have a height specified in the CSS. When the child ul tags slide out, the parent cannot expand further than the specified height. Getting rid of the height in the CSS solves this issue.

Here is the updated JSFiddle without a height - http://jsfiddle.net/gPxbn/2/

Upvotes: 3

George Matiashvili
George Matiashvili

Reputation: 110

$("#linkListSub3 li").click(function(){
    $(this).toggleClass("active");
    $("ul",this).slideToggle("slow"); // is this line correct?
    $(this).slideToggle("slow"); //should it be like this?
    return false; //Prevent the browser jump to the link anchor
});

Upvotes: 0

Related Questions