SlideToggle Specific Div onClick of Checkbox has yet to work?

Question

Following this fiddle http://jsfiddle.net/swQLg/10/ has yet to work with this setup http://jsfiddle.net/u56Zv/

HTML:

<div class="PanelWhen" id="PanelWhen">
        That
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn whenBtn">
    <input type="checkbox" id="whenBtn"> When
  </label>
</div>

CSS:

#PanelWhen {
  display: none;
}

JS:

<script>
$(document).ready(function () {
    $("#whenBtn").on('click', function () {
        var $when = $(this).next("#PanelWhen");
        $when.slideToggle();
        $("#PanelWhen").not($when).slideUp();
    });
});
</script>

Answer 1

You're using jQuery, so you have to make sure to include that library in the fiddle.

Secondly, the .previous method searches for a sibling element--it doesn't look anywhere in the DOM tree. Note that in the first example, it looks for the next('.ans') element--which works fine because all of the elements are siblings.

In your example, you may want to just scope the $when var to be the specific element you want revealed, but if you want a repeatable result across the site, you should think about scoping it with some locative method (i.e. .parent, .children, .siblings, .next, .previous etc.)

Here's your new fiddle:

http://jsfiddle.net/u56Zv/2/