Js jquery css html Slider Panel question

Chris Fullmer

I am VERY new to js and the html DOM model, so I'm hoping this is a super simple fix. I've got a web dialog I am working on, and I am making these slider panels. The idea is that the user would click on a title and under it a panel slides down. Well, I've got that working, but I can't digure out how to make it drop down the correct panel. II've got it hard coded to drop down the 2nd panel right now, but I want it to be coded to drop down the panel that belongs to whatever titlebar was clicked. I jsut can't figure out how to do that exactly.

If someone's got a few minutes, could you look over this code and test it, you'll see what its doing. And any suggestions to fix it would be great.

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".slider_head").click(function(){ 
		$("#panel_1").slideToggle("fast");
	});
});
</script>
 
<style type="text/css"> 

div.panel, div.slider_head
{
	margin;0px;
	text-align;center;
	background;#e5eecc;
	border;solid 1px #c3c3c3;
}
div.panel
{
	height;120px;
	display;none;
}
</style>
</head>
<body>

<div class="slider_div">
	<div class="slider_head" id="flip_0" >
		<p>Show/Hide Panel</p>
	</div>
	<div class="panel" id="panel_0" >
		<p>This is a panel</p>
	</div>
</div>

<div class="slider_div">
	<div class="slider_head" id="flip_1" >
		<p>Show/Hide Panel</p>
	</div>
	<div class="panel" id="panel_1" >
		<p>This is a panel</p>
	</div>
</div>

</body>
</html>

So to recap - I know why it is always showing that one panel, I have it "hard coded" to that panel. I just can't figure out how to write it in a non-hard coded manner.

This is the js code I had wanted to use, but "self" is not returning the value I thought it would. I hoped it would return the specific titlebar I clicked on, and therfore .parent().child(".panel") would return the appropriate panel to drop down. But that is not working.

<script type="text/javascript">
$(document).ready(function(){
	$(".slider_head").click(function(){ 
		$(self).parent().child(".panel").slideToggle("fast");
	});
});
</script>

Anyhow, anything would be helpful, thanks!

thomthom

@chris fullmer said:

"self"
this is Ruby talk. In JavaScript it is called this.

$(this).parent().child(".panel")

thomthom

$(this).siblings(".panel") should to the same thing.

driven

hi chris,
thom beat me to it , but I tweaked your code, so it more obviously shows (this).siblings works.

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $(".slider_head").click(function(){ 
     $(this).siblings(".panel").slideToggle("fast");
   });
});
</script>



<style type="text/css"> 

 div.panel, div.slider_head
{
   margin;0px;
   text-align;center;
   background;#e5eecc;
   border;solid 1px #c3c3c3;
}
div.panel
{
   height;120px;
   display;none;
}
#panel_1 {background;pink;}
#panel_2 {background;yellow;}

</style>
</head>
<body>

<div class="slider_div">
   <div class="slider_head" id="flip_1" >
      <p>Show/Hide Panel 1</p>
   </div>
   <div class="panel" id="panel_1" >
      <p>This is  panel 1</p>
   </div>
<div class="slider_div">
   <div class="slider_head" id="flip_2" >
      <p>Show/Hide Panel 2</p>
   </div>
   <div class="panel" id="panel_2" >
      <p>This is  panel 2</p>
   </div>
</div>
</div>

</body>
</html>

john

Chris Fullmer

Of course, "this"! I thought for sure what I was doing should work. But probably not with "self"

Thanks guys, I'll try it out and let you know if(when) I have any more questions, thanks!

Chris

Chris Fullmer

Yup, works like a charm. Thanks! I was really hoping it was something as simple as switching "self" to "this",

Chris