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..

[iamthwee]

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;
});