Clever Geek Handbook

JQuery show / hide next div

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

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

... only if the div is t_edit_cont

right after the button edittopic

. I currently have them in separate DIVs, for example:

<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 .

+3


source to share


3 answers


You can use parent()

jQuery to point to the correct path:

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

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

For example (using attributes data-

):



<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();
});
+1


source


You must select a parent before doing .next()

DEMO



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


source


I think you want to show hide how you want your FAQ, I hope it will be helpful to you.

http://jsfiddle.net/indianwebdesigner/yhvm4duq/

if not, then leave a message

Html

<div class="mod_wrap">
    <div class="t_mod_box">
        <a href="#" class="edittopic" name="send">Toggle</a>
    </div>

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

JQuery

$(this).parents(".mod_wrap").find(".t_edit_cont").slideToggle();
+1


source






More articles:


All Articles