Question

I am trying to do a simple slideToggle when an anchor tag is clicked. The text that should slideToggle is wrapped in a span tag that is coded directly after the anchor tag. I tried something like this but it did not work:

<script>
$('#rp-help-main a').click(function() {
  $(this).next().find("span").slideToggle('slow', function() {
    // Animation complete.
  });
});
</script>

Here is a sample html:

<div id="rp-add-note">
<h4>Add note tool</h4>
<p>
This tool allows you to <strong>add a note</strong> anywhere in your room.  Simply move your cursor to where you'd like your note to appear and left-click.<a href="#" onclick="return false">expand more</a>  <span>A text box will appear.  Once you type your note choose SAVE and your note will be inserted directly into your room. 
<br /><br />
Move your note using the selection tool.  Simply click on the note and drag it where you'd like it to appear.  To delete, click on the note to view the text box again.  Once the text box appears, click REMOVE TEXT
</span>
 </p>
 </div>

   <div id="rp-undo-tool">
<h4>Undo tool</h4>
<p>
Click on this button at any time to <strong>undo your last action</strong>.  Note:  This will only undo your last action, it will not... <a href="#" onclick="return false">expand more</a> <span>continue to undo previous actions. 
 </span>
 </p>
 </div>

Answer 1

Remove that find('span'). Then it’s working for me:

$('#wrapper a').click(function() {

    $(this).next().slideToggle('slow', function() {
        // Animation complete.
    });
});

http://jsbin.com/exovos/3/edit