slideToggle() not working properly

Question

I added a slideToggle() effect in my page but it doesn't work properly.

$j(".fields_toggle").click(function() {
    $j(this).toggleClass("closed").next('.toggle_container').slideToggle('slow');
});

Clicking the toggle-trigger gets the slide-content sliding-down and then sliding-up immediatelly, without clicking it again.

<div class="onoffswitch right fields_toggle">
    <input type="checkbox" name="myonoffswitch2" class="onoffswitch-checkbox" id="myonoffswitch2" checked>
    <label class="onoffswitch-label " for="myonoffswitch2"> <span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>

    </label>
</div>
<div class="row toggle_container">
    <input type="text" id="dpd1" value="" class="form-control datepicker" placeholder="Arrival">
    <input type="text" id="dpd2" value="" class="form-control datepicker" placeholder="Departure">
</div>

http://jsfiddle.net/ktsixit/kp533/

The reason for this is beacause I'm using the checkbox-radio-switch.css file (included in ExtendBootstrap). It's just some css that gives a switch look on checkboxes.

How can I fix this?

Answer 1

Here, I got this working properly.

I gave 2 id to related divs

<div class="onoffswitch right fields_toggle" id="btn_for_toggle">

and

 <div class="row toggle_container" id="form_elements">

and in javascript part:

jQuery("#myonoffswitch2").on("click", function () {
    jQuery("#form_elements").toggle("slow");
    jQuery("#btn_for_toggle").toggleClass("closed");
});

See my fiddle

Answer 2

Hi I got this far with the fiddle

I just keep track with:

var on = true;

I also hooked into the change event, because it seemed that it went click -> change -> click

$j(".fields_toggle").on('change', function (e) {
     console.log(2);   
     e.preventDefault();
    on = !on;
});

I think this gets what you need?