jquery - Slide Toggle

Question

I haver the following HTML:

<div class="community-topic">
  <h2><b>Ask</b> a Question</h2>
  <p class="ask">+</p>
    <div class="addtitle">
      <p>Give your Question a great title</p>
        <form name="input" action="submit.php">
         <input id="title" type="text" name="title" />
         <input id="go" type="submit" value="Go" />
        </form> 
       <a href="discuss.php?style=question">See more questions</a>
     </div>

Then the following jQuery:

$('.ask').toggle(function() {
    $(this).text('-').next('.addtitle').slideDown('fast');
}, function() {
    $(this).text('+').next('.addtitle').slideUp('fast');
});

I also want the .toggle function to happen when the <h2> his clicked.

How can adjust the above jQuery to include this?

Answer 1

Add:

$('.community-topic h2').toggle(function() {
    $(this).next('.addtitle').slideDown('fast');
}, function() {
    $(this).next('.addtitle').slideUp('fast');
});

Answer 2

You can attach a click handler to the h2 that clicks the <p> like this:

$('.ask').toggle(function() {
    $(this).text('-').next('.addtitle').slideDown('fast');
}, function() {
    $(this).text('+').next('.addtitle').slideUp('fast');
}).prev('h2')​​​.click(function() {
    $(this).next().click();
});​

You can give it a try here, this makes a click on the <h2> trigger a click event on the .ask, firing its .toggle() function. It's important to do this instead of using both in the selector because the toggle's state is per element, so to keep them in sync you only want it in one place.