CODEWITHSUNDEEP
javascriptjquery
copenndthagen
copenndthagen

Reputation: 50732

jquery unable to select element using next/closest

I have the following HTML on my page;

<div id="c2">
    <input type="checkbox" class="expandCollapseSection" id="my_chk">
    <span>Header</span>
    <div style="" class="contentDiv">
        <div class="oj-inputtext oj-form-control oj-component">some things</div>
    </div>
</div>

I have the following JS code;

$(".expandCollapseSection").click(function (event) {
    if ($(this).prop("checked")) {
        $(this).next('.contentDiv').slideDown('slow');
    } else {
        $(this).next('.contentDiv').slideUp('slow');
    }
});

Now my question is $(this).next('.contentDiv') does not select the contentDiv

I even tried using $(this).closest('.contentDiv')

But still does not select.

Just to add $(".contentDiv") does get the div though.

Am I doing something wrong here?

Upvotes: 0

Views: 57

Answers (5)

lshettyl
lshettyl

Reputation: 8181

You may also use nextAll and shorten your code too, like below.

$(".expandCollapseSection").change(function (event) {
    var div = $(this).nextAll('.contentDiv');
    var func = this.checked ? 'slideDown' : 'slideUp';
    div[func]("slow");
});

Demo@Fiddle

Upvotes: 0

ozil
ozil

Reputation: 7117

use siblings( ".selected" ) 

$(".expandCollapseSection").click(function (event) {
    if ($(this).prop("checked")) {
        $(this).siblings('.contentDiv').slideDown('slow');
    } else {
        $(this).siblings('.contentDiv').slideUp('slow');
    }
});

Demo

Upvotes: 1

Priyank
Priyank

Reputation: 1009

Try This Code,

$(".expandCollapseSection").click(function (event) {
    if ($(this).prop("checked")) {
        $(this).closest('#c2').find('.contentDiv').slideDown('slow');
    } else {
        $(this).closest('#c2').find('.contentDiv').slideUp('slow');
    }
});

Upvotes: 0

Vinod Kumar
Vinod Kumar

Reputation: 981

kapantzak's answer is correct.

However you could simply use

$(this).parent().find('.contentDiv');

Slightly more efficient, as you don't have to find closest div.

Upvotes: 0

kapantzak
kapantzak

Reputation: 11750

You can try:

$(this).closest('div').find('.contentDiv');


$(".expandCollapseSection").click(function (event) {
    if ($(this).prop("checked")) {
        $(this).closest('div').find('.contentDiv').css({'color':'red'});
    } else {
        $(this).closest('div').find('.contentDiv').css({'color':'green'});
    }
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="c2">
    <input type="checkbox" class="expandCollapseSection" id="my_chk">
    <span>Header</span>
    <div style="" class="contentDiv">
        <div class="oj-inputtext oj-form-control oj-component">some things</div>
    </div>
</div>
<div id="c3">
    <input type="checkbox" class="expandCollapseSection" id="my_chk">
    <span>Header</span>
    <div style="" class="contentDiv">
        <div class="oj-inputtext oj-form-control oj-component">some things</div>
    </div>
</div>

Upvotes: 0

Related Questions