jQuery show/hide next div

Question

How do I show/hide next div? The following code works:

jQuery(".edittopic").click(function() {
    jQuery(this).next(".t_edit_cont").toggle();
});

... only if the t_edit_cont div is right after the edittopic button. Currently, I have them in separate DIVs, like this:

<div class="t_mod_box">
    <input type="submit" value="Edit" class="edittopic" name="send" /> 
</div>

<div class="t_edit_cont">
   Show hide content inside here...
</div>

How can I make this work? jsfiddle demo.

Solution 1

You can use parent() to point jQuery in the right path:

jQuery(this).parent().next(".t_edit_cont").toggle();

Yet, a cleaner and more reliable approach would be to associate the clicked button and the div somehow.

For example (using data- attributes):

<input type="submit" value="Edit" class="edittopic" data-id="1" name="send" />

<div class="t_edit_cont" data-id="1">
Show hide content inside here...
</div>

Then:

jQuery(".edittopic").click(function() {
    var btnId = $(this).data('id');
    jQuery('.t_edit_cont[data-id=' + btnId + ']').toggle();
});    

Solution 2

Need to select parent before doing .next()

DEMO

$(function() {
    $(".edittopic").on('click', function() {
        $(this).parent().next(".t_edit_cont").toggle();
    });
})