jQuery Toggle not working on properly second time

Question

I am trying to change the height of the div each time onclick. Give a fixed height based on the content on first click and then height default/auto on second click. But the following codes works only first time toggles, when I click it again it doesn't work, doesn't set the height auto/default in second time. Can anyone tell me what's wrong with the code also, In new jQuery version how to write toggle function. If I write toggle function in newer version the button disappears.

 $('.item-inner .circle').toggle(function(){
  var itemHeight = $(this).parents('li').siblings('li').children('.item').height();
  $(this).parents('.item').addClass('active');
  $(this).parents('.item').height(itemHeight);
 }, function(){
  $(this).parents('.item').removeClass('active').delay(1000).queue(function() {
   $(this).height('');
  });
 });

ul, li {
   list-style: none; 
 padding: 0;
  margin: 0;
 }

.circle {
    background: #c8d3d8;
    padding: 10px;
    display: inline-block;
    cursor: pointer;
  }
.item {
    border: 2px solid #c8c8c8;
    padding: 10px;
    margin-bottom: 10px;
  }
.item.active {
    background-color: #c4c4c4;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<ul>
  <li>
    <div class="item">
      <div class="item-inner">
        <p>Lorem ipsum dolor sit amet, nec ea modus graece scaevola, sed explicari vituperata ut. Possim oportere eu his, velit intellegam eos an, cum no discere perfecto. Et sed congue nominati. Sit vero dolorem invidunt ea, ius quis munere eu.</p>
        <span class="circle">click me</span>
       </div>
    </div>
   </li>
  <li>
    <div class="item">
      <div class="item-inner">
        <p>Lorem ipsum dolor sit amet, nec ea modus graece scaevola, sed explicari vituperata ut. Possim oportere eu his, velit intellegam eos an, cum no discere perfecto. Et sed congue nominati. Sit vero dolorem invidunt ea, ius quis munere eu.</p>
        <span class="circle">click me</span>
       </div>
    </div>
   </li>
  <li>
    <div class="item">
      <div class="item-inner">
        <p>Lorem ipsum dolor sit amet, nec ea modus graece scaevola, sed explicari vituperata ut. Possim oportere eu his, velit intellegam eos an, cum no discere perfecto. Et sed congue nominati. Sit vero dolorem invidunt ea, ius quis munere eu.</p>
        <span class="circle">click me</span>
       </div>
    </div>
   </li>
  <li>
    <div class="item">
      <div class="item-inner">
        <p>Lorem ipsum dolor sit amet, nec ea modus graece scaevola, sed explicari vituperata ut. Possim oportere eu his, velit intellegam eos an, cum no discere perfecto. Et sed congue nominati. Sit vero dolorem invidunt ea, ius quis munere eu.</p>
        <span class="circle">click me</span>
       </div>
    </div>
   </li>
</ul>

Possible duplicate of [Where has fn.toggle( handler(eventObject), handler(eventObject)…) gone?](http://stackoverflow.com/questions/14301935/where-has-fn-toggle-handlereventobject-handlereventobject-gone) — Satpal, Aug 13 '15 at 07:23
@PraveenKumar, _In new jQuery version how to write toggle function_ and _true_ Attention to detail! and I have not voted to close the question — Satpal, Aug 13 '15 at 07:29
@MateiMihai, when you click on any "click me" button second time (after first toggle fully completes) or if you count the clicks then it's on 4th click it doesn't set the height of .item div to default/auto. That's my problem — Kcoitk, Aug 13 '15 at 07:34

score 0 · Answer 1 · answered Aug 13 '15 at 07:33

0

It looks you want to nullify height on toggle, change :

$(this).height('');

to

$(this).css('height','auto');

answered Aug 13 '15 at 07:33

Vaibhav J

1,316
8
15

I tried with $(this).css('height','auto'); but doesn't revert the height on 4th click – Kcoitk Aug 13 '15 at 07:38
sorry, somehow it works, if I click only 1 button 4 times. but if you click any button and then click any other button the code doesn't work on 4th click – Kcoitk Aug 13 '15 at 07:41

jQuery Toggle not working on properly second time

1 Answers1