I have followed the following thread to create a simple accordion.
The tutorial is created by “nimpkish-media” and is hosted at the following link:
http://www.nimpkish.com/blog/jquery-accordion-demo
Problem:
When the items slide up to hide, i loose the space between the items. When i click again, the div tags jump and show the space. I have tried changing the css but still could not figure out this behavior.
Full code:
Note: jQuery library reference is per my test dir structure.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript" src="../../parent/jquery-1.4.2.min.js"></script>
<style type="text/css">
.parentContainer {width: 400px; }
.showHide { padding: 0 0 0 50px; margin: 0 0 5px 0; background-color: red; height: 20px; line-height: 20px; cursor: pointer; }
.showHide a { color: #fff; text-decoration: none; display: block; }
.showHide a:active { outline: none; }
.showHide a:hover { color: #ccc; }
.active {background-color: yellow; }
.active, .active a {color: black;}
.contentContainer {margin: 0 0 5px; padding: 15px 20px 10px 20px; border: 1px solid #333; background-color: #EFEFEF; }
</style>
<script type="text/javascript">
$(document).ready(function(){
//hide all onload
$(".contentContainer").hide();
$('.dummy').click(function(){
$('#'+$(this).attr('rel')).click();
return false;
});
$('div.showHide').click(function(){
var $next = $(this).next(".contentContainer");
if ( $next.is(':visible') ) {
$(this).removeClass("active");
$next.slideUp(200);
}else{
//remove the active class for all, and hide
$('div.showHide').removeClass("active");
$(".contentContainer").slideUp(200);
//add active class to current and expand
$(this).addClass("active");
$next.slideDown(200);
}
});
});
</script>
</head>
<body>
<div class="parentContainer">
<a href="#" class="dummy" rel="one">1</a>
<a href="#" class="dummy" rel="two">2</a>
<a href="#" class="dummy" rel="three">3</a>
<br><br>
<div class="showHide" id="one">1</div>
<div class="contentContainer">#1 Content</div>
<div class="showHide" id="two"><a href="#">2</a></div>
<div class="contentContainer">#2 Content</div>
<div class="showHide" id="three"><a href="#">3</a></div>
<div class="contentContainer">#3 Content</div>
</div>
</body>
</html>
Thanks