How do I select this li item?

Question

I have multiple .listings-channel-rows but only want to show/hide the .listings-details-row within its own parent list. I think I'm along the right lines but can't quite figure out the syntax. Any help?

The HTML:

<li class="listings-channel-row clearfix">
    <a href="#" class="listings-program toggle borderbottom">
        Back to the future 2 <span class="year">(1989
    </a>
    <li class="listings-details-row collapse-down">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam amet dolor accusamus itaque aspernatur exercitationem optio neque minima at nisi. Distinctio blanditiis vero porro saepe nesciunt explicabo deserunt aspernatur quasi.</p>
    </li>
</li>

jQuery:

$(function () { 
    $(".toggle").on( "click", function () {
        $(this).parent().children('li').toggle('fast');
        $(this).toggleClass("borderbottom");
  });
});

Answer 1

You should be able to just use .next()

http://api.jquery.com/next/

$(this)
  .toggleClass("borderbottom")
  .next().toggle('fast');

Answer 2

try this

$(function () { 
    $(".toggle").on( "click", function() {
        $(this).siblings('.listings-details-row').toggle('fast');
        $(this).toggleClass("borderbottom");
    });
});

Answer 3

To select a child you can just use the child selector $(".listings-channel-rows .listings-channel-rows")

or if you want to select the direct child you can use $(".listings-channel-rows > .listings-channel-rows")