slideToggle slides down up and down again

[cgull]

Hello,

I am having a strange behaviour with jQuery slideToggle.

When I click the link with class "tracking" I want the div under it to slide down if it is "closed" and up if it is "open"

The problem I have is that when I click the link, the div slides down, up and down again.

If I use just toggle it works fine. Why is that?

My code:

<div id="trackAjax">
  <a href="#" data-orderid="<?php echo $orderId; ?>" class="tracking">Enter Tracking No</a>

  <div id="trackingBox<?php echo $orderId; ?>" style="display:none">
    <?php 
      $attr = array('id'=>'trackForm');
      echo form_open($url, $attr);
    ?>
    <div class="control-group <?php if(form_error('tracking_no')) echo 'error'; ?>" style="margin-bottom:2px">
      <?php echo form_input(array('name'=>'tracking_no', 'class'=>'input-medium trackingNo', 'style'=>'margin-bottom:2px', 'value'=>set_value('tracking_no', $tracking_no))); ?>
      <span class="help-block"><?php echo form_error('tracking_no'); ?></span>
      <?php echo form_submit('submit', 'Save', 'class="btn"'); ?>
      <input type="hidden" name="submitted" value="1" />
    </div>

  </div>
  <?php echo form_close(); ?>
</div>
<script>
$(function()
{
  $('.tracking').on('click', function() {
    var id = $(this).data('orderid');
    $('#trackingBox'+id).slideToggle();
    return false;
 });
});

[JorgeM]

Since this is a jQuery question... can you provide the HTML that is the result of running your page? OR if you have this online, provide the URL..

if the slide toggles works why not just use this.

[pixelsoul]

I don't see a problem with it, but I don't usually use toggle though because it acts funky sometimes when I do.

You could do something like this instead

$('.tracking').on('click', function () {
    var id = $(this).data('orderid');
    if($('#trackingBox' + id).is(':hidden')){
        $('#trackingBox' + id).stop().slideDown();
    }else{
        $('#trackingBox' + id).stop().slideUp();
    }
    return false;
});