Ok, I feel like I"m missing something really simple but here goes:

This code works great, exactly the way I want it to. You click the link and the next div is revealed (There are about 10 of these on a page)

    $('a.addtask').click(function(){
      $(this).next('.field').slideToggle();
    return false;
    });

  <div class="field">
   Some content
  </div>

  <a href="#" class="addtask">Add a task</a>

  <div class="field" style="display:none;">
    some other content
  </div>

What I want to do however is change the HTML like so (link inside the div):

<div class="field">
   Some content
   <a href="#" class="addtask">Add a task</a>
  </div>


  <div class="field" style="display:none;">
    some other content
  </div>

^^Which doesn't work properly anymore.

What do I need to change in my jquery to make this work? I've been googling for a while now and a number of solutions in similar posts dont seem to be working.

Ok, I feel like I"m missing something really simple but here goes:

This code works great, exactly the way I want it to. You click the link and the next div is revealed (There are about 10 of these on a page)

    $('a.addtask').click(function(){
      $(this).next('.field').slideToggle();
    return false;
    });

  <div class="field">
   Some content
  </div>

  <a href="#" class="addtask">Add a task</a>

  <div class="field" style="display:none;">
    some other content
  </div>

What I want to do however is change the HTML like so (link inside the div):

<div class="field">
   Some content
   <a href="#" class="addtask">Add a task</a>
  </div>


  <div class="field" style="display:none;">
    some other content
  </div>

^^Which doesn't work properly anymore.

What do I need to change in my jquery to make this work? I've been googling for a while now and a number of solutions in similar posts dont seem to be working.

• javascript
• jquery
• jquery-selectors

3 Answers 3

$(".addtask").parent().next(".field") should work

Try this: $(".addtask").nextAll('.field').first()

I have done plete bins for above issue.

DEMO: http://codebins./bin/4ldqp9y

HTML:

<div class="field">
  Some content
  <a href="#" class="addtask">
    Add a task
  </a>
</div>
<div class="field" style="display:none;">
  some other content
</div>

CSS:

.field{
  padding:7px;
  border:1px solid #4455f9;
  background:#74cca9;
}

JQuery:

$(function() {
    $('a.addtask').click(function() {
        $(this).closest('.field').next('.field').slideToggle();
        return false;
    });

});