jQuery Accordion Help...?

I’ve put together this accordion with some help from some tutorials and i’ve come across a style problem.

You can see it here…

I’m after the line disappearing once you click the button.

So you click the button and the content appears but without a line at the top below the test, so like this…

When currently it looks like this…

Obviously doesn’t make sense as the line is separating the content that is meant to be seen together i.e the top pic.

Any way this can be done?

Many thanks for any help :slight_smile:

You were really close!

I hope this pastes ok:


<!DOCTYPE HTML>
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>


<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>test</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.lite.1.0.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	
	$(".drop_container").hide();

	$("li.drop").toggle(function(){
		$(this).addClass("active"); 
		$(this).removeClass("inactive");
		}, function () {
		$(this).removeClass("active");
		$(this).addClass("inactive");
	});
	
	$("li.drop").click(function(){
		$(this).next(".drop_container").slideToggle("slow");
	});

});


</script>

<style>

ul, li{list-style:none}

body{font-size:62.5%; font-family:Helvetica,"Helvetica Neue",Arial,sans-serif}

/*Black*/

#right_col li a:hover{
	color: #000;
}

/*Dark Grey*/

h1 a,#right_col li a,li.drop_container p{color: #828282;}

#left_col,#right_col{
	width: 197px;
	float: left;
	height: 500px;
	background-repeat: repeat-x;
	background-position: 0 top;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #999;	
}

#right_col {
	
}

.drop_side li{
	line-height:4.25em;	
}
.inactive{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999;
}
.active{
	border-bottom: none;
}

.drop_side li.drop_container {
	height:355px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999;
}

li.drop_container p{font-size:1.1em;
line-height:1.49em;
	
}

.drop_side li a{text-decoration: none;font-weight: bold;display:block;}

.drop_side li a:hover{}
</style>
</head><body>

<div id="demos">

<div id="right_col">

<ul class="drop_side">
<li class="drop inactive"> <a href="#">Test</a></li>
<li class="drop_container">

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</li>
<li class="drop inactive">  <a href="#">test</a></li>
<li class="drop_container">

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>


</li>
</ul>


  
  </div><!--END_right_col-->

	</div>

</body></html>


Let me explain what I did:

I created two CSS classes. One that had your border-bottom declarations, and one that removed them. I called them active (for when the drop_container is visible) and inactive (for when the drop_container is hidden).

In the jQuery toggle function, I simply either add the CSS class or remove it depending if the drop_container is visible or not.

You’ll also notice that in <li class=“drop”> I added the inactive class by default.

Brilliant, thanks ever so much :slight_smile: