Margin issue

HTML & CSS
1

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

2

IE 8.

IE 6 and 7 are ok.

3

What browser is this happening in? It works fine in FF 3.6, Safari 5, Opera 10.6 and Chrome (Mac).

4

Hi @tahirjadoon,

Sorry I have been so busy with work the last while I haven’t been on this forum. I took a look at your code, and the only think I can think of is the :visible selector. I know IE sometimes has issues with that.

I have but this together for you, let me know if it works.

<!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="http://code.jquery.com/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();  
	
	$('a.dummy').click(function(){        
		var index = $('a.dummy').index(this);
		showHide(index);
                return false;
        });
    
       $('.showHide').click(function(){            
       	        var index = $('.showHide').index(this);
		showHide(index);
                return false;
	});
	
	function showHide(index){
		var currentDiv = $('.contentContainer').eq(index);		
		if ( currentDiv.hasClass('visible') ) {
			$(currentDiv).removeClass('visible').slideUp(200);	
		} else {
			$('.contentContainer').removeClass('visible').slideUp(200);
			$(currentDiv).addClass('visible').slideDown(200);
		}		
	}

});

</script>
</head>
<body>
<div class="parentContainer"> <a href="#" class="dummy">1</a> <a href="#" class="dummy">2</a> <a href="#" class="dummy">3</a>
  <div class="showHide">1</div>
  <div class="contentContainer">#1 Content</div>
  <div class="showHide">2</div>
  <div class="contentContainer">#2 Content</div>
  <div class="showHide">3</div>
  <div class="contentContainer">#3 Content</div>
</div>
</body>
</html>