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">
      $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" />

  <?php echo form_close(); ?>
  $('.tracking').on('click', function() {
    var id = $(this).data('orderid');
    return false;
5 Years
Discussion Span
Last Post by pixelsoul

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


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();
        $('#trackingBox' + id).stop().slideUp();
    return false;
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.