Question

Here is my jQuery:

$('.ask').click(function() {
    $('.addtitle').slideToggle('fast', function() {
    // Animation complete.
    });
});

And my HTML:

                            <p class="ask">+</p>
                                <div class="addtitle">
                                    <p>Give your Idea a great title</p>
                                    <form name="input" action="#" method="get">
                                        <input id="title" type="text" name="title" />
                                        <input id="go" type="submit" value="Go" />
                                    </form> 
                                </div>

I have multiple .ask div’s on the page and I only want it to effect the .next() div named .ask rather than all div’s named .ask.

I also want to .toggle() the ‘+’ character to ‘-‘

Can anyone assist?

Answer 1

You can do it using .next() and .toggle() like this:

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

.next(selector) get the next sibling if it matches the selector, if there may be something in-between then use .nextAll('.addtitle:first'), .toggle() cycles between the functions you provide on each click event, so it’ll swap the text and slide appropriately every click.