Remove a class from the closest div with class

Question

I am having an issue removing/adding a class to the closest div with a class. Right now it toggles the class for all, and not for the closest.

What am I doing wrong?

$(document).on('click', '.btnMoreInfo', function () { 
$(this).closest('div').find('.moreInfo').toggleClass('hide')
})

HTML:

<ul>
<li>
    <button class='btnMoreInfo'>More</button>
    <div class='moreInfo hide'></div>
</li>
<li>
    <button class='btnMoreInfo'>More</button>
    <div class='moreInfo hide'></div>
</li>
<li>
    <button class='btnMoreInfo'>More</button>
    <div class='moreInfo hide'></div>
</li>
<li>
    <button class='btnMoreInfo'>More</button>
    <div class='moreInfo hide'></div>
</li>
<li>
    <button class='btnMoreInfo'>More</button>
    <div class='moreInfo hide'></div>
</li>

Answer 1

One way would be to use jQuery's next() method (assuming your HTML structure always looks like it does above):

$(document).on('click', '.btnMoreInfo', function () { 
  $(this).next('div').toggleClass('hide');
})

jsFiddle example here.

Answer 2

$(this).next('.moreInfo').toggle();

you can also use slideIn and slideOut and toggle

Answer 3

you can use next like

$(this).next('.moreInfo').toggleClass('hide');