Forums

brianatlarge

Website: http://stuckpixelstudio.com/clients/cro ... stries.php

So what I'm going for is when you click on a header with the class ".ministriestitle" , the contents in a paragraph with the class ".ministrydetail" slides down, and when you click it again it slides back up. I was able to make this work fine, but whenever you would click on one of the headers, ALL of the paragraphs would show. So, by referencing my "Learning jQuery" book, I tried to combine some (function(event) stuff with my .toggle thing, but I can't seem to get it to work. I dunno if I'm missing a parenthesis or a bracket, or if there is something wrong with how I'm doing this. So, here's the code:

$(document).ready(function()
	$('.ministriestitle').toggle(function(event) {
		if (event.target == this) {
			$('.ministrydetail').slideDown('fast');
		}, function() {
			$('.ministrydetail').slideUp('fast');
		}
	});
});

Thanks guys.

Robskiwarrior

In the first like you have forgotten to open your curlies... you are missing a {

$(document).ready(function()

should be

$(document).ready(function() {

If that dont fix it, give this a try...


$(document).ready(function() {
	
	$(\".ministriestitle\").toggle(function() {
		$(\".ministrydetail\").slideDown(\"fast\"); },
		function() {
		$(\".ministrydetail\").slideUp(\"fast\"); });
	});

});

I kinda just did it off the top of my head, not too good with jQuery yet so dont expect much :D

brianatlarge

Didn't fix it. I'm sure that missing brace would have had some kind of ill effect, however that apparently isn't my problem.

Firebug says there is a syntax error on line 5:

syntax error
}, function() {

brianatlarge

I ended up finding this piece of code and changing some classes and it did exactly what I was looking for!

$(document).ready(function()
{
  //hide the all of the element with class ministrydetail
  $(\".ministrydetail\").hide();
  //toggle the componenet with class ministrydetail
  $(\".ministriestitle\").click(function()
  {
    $(this).next(\".ministrydetail\").slideToggle('fast');
  });
});

Robskiwarrior

"brianatlarge" said:

I ended up finding this piece of code and changing some classes and it did exactly what I was looking for!

$(document).ready(function()
{
  //hide the all of the element with class ministrydetail
  $(\".ministrydetail\").hide();
  //toggle the componenet with class ministrydetail
  $(\".ministriestitle\").click(function()
  {
    $(this).next(\".ministrydetail\").slideToggle('fast');
  });
});

Brilliant! Thanks for posting the solutions :D Time to study and learn :D

treehouse : what would you like to learn today?

Forums

jQuery - selecting something that is clicked