jQuery Toggle Script

Anybody able to help me with a simple toggle script?

Here is the html:


<dl class="grid-list">
	<dt>Bar</dt>
	<dd>
		<p>content here...</p>
	</dd>
	<dd class="links">
		<ul>
			<li class="book">
				<a href="#enquire-form">Enquire Now</a>
			</li>
		</ul>
	</dd>
	<dd class="form">
		<form name="" class="enquiry-form">
			<fieldset>
hello world
</fieldset>
		</form>
	</dd>
</dl>
<dl class="grid-list">
	<dt>Restaurant</dt>
	<dd>
		<p>content here...</p>
	</dd>
	<dd class="links">
		<ul>
			<li class="book">
				<a href="#enquire-form">Enquire Now</a>
			</li>
		</ul>
	</dd>
	<dd class="form">
		<form name="" class="enquiry-form">
			<fieldset>
hello world
</fieldset>
		</form>
	</dd>
</dl>

Here is the jQuery

<script type="text/javascript">
// Toggle advanced options
$(document).ready(function(){
$("dl#grid-list dd.links a").click(function(){
$(this).next.slideToggle("slow");
return false;
});
});
</script>

Basically I need to toggle the enquiry form, what am I doing wrong?

Hi

This may help


$(document).ready(function(){
	
	$(".toggle_container").hide();
 
	$("h2.trigger").toggle(function(){
		$(this).addClass("active"); 
		}, function () {
		$(this).removeClass("active");
	});
	
	$("h2.trigger").click(function(){
		$(this).next(".toggle_container").slideToggle("slow,");
	});
 
});


<h2 class="trigger"><a href="#1">Title</a></h2>
<div class="toggle_container" id="1">
  <div class="block"><p>Content for first container</p></div></div>

  <h2 class="trigger"><a href="#2">Title</a></h2> 
  <div class="toggle_container" id="2">
<div class="block">
<p>Content for second container</p>
</div><!-- block -->
</div><!--container2 -->

that’s not my markup.

For starters, there’s a mistake with “next”. It should be $(this).next().slideToggle("slow").

ok, still not working here. I don’t need to put an anchor id in the a href do I?

Sorry I should have explained - I had an issue with .click so changed to toggle and it worked, thus just something that may help you

You’ve used javascript several times in the past and obviously you’re a web developer, so I think you need to invest some time in learning some very basic javascript. Perhaps more than anything you need to learn to navigate the DOM. The tutorial at quirksmode.org is very good. jQuery makes it all even easier, but a foundation in the DOM will be very useful.

Basically, the problem is that $(this).next() doesn’t refer to anything. $(this) refers to the clicked element, i.e. the “Enquire Now” link. Since it has no sibling, there is no next(). What I would do is first target the “.links” elements, save it to a variable and then use that to a) apply the onclick events; b) toggle the fieldsets in each click’s function.

I suggest you head over the the jQuery documentation and look at the Traversing section.

@Raffles - that certainly is the plan I can assure you. Time is a massive premium for me at the moment, hence why I am cheating slightly.

$(document).ready(function(){
  $("dl#grid-list dd.links a").click(function(){
    $(this).parent().parent().parent().next().slideToggle("slow");
    return false;
  });
});

That would work. Can you see why it’s $(this).parent().parent().parent().next() ?

yes, because it’s traversing the DOM.

Seems fairly long winded though.

Still not working though.

I even changed the dl#grid-list to dl.grid-list as that what was in the code. I have a feeling the parent() is one too many.

Nope.