Question

I have a html webpage where I have a list that when an item is clicked it will expand some text and make the container increase in height. What is the best way to detect the contracting of a list item.

For example when I click an item it expands and everthing increases in size correctly. However when I click the same item again, it increases the container again, because I am not sure how to distinguish the expand and contract, using one function for all the items on the list.

function slidedown(id){
  $('#'+id.id+'text').slideToggle(250);   
  var height = document.getElementById("aboutmiddle").style.height
  value = parseInt(height);
  value +=100;
  document.getElementById("aboutmiddle").style.height = value+"px";
}

as you can see on click I want it to increase the height of aboutmiddle but I would like to decrease aboutmiddle height on the second click.

Answer 1

Jquery has a toggle function that’ll do this for you

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
<script>
  $('#clickme').click(function() {
    $('#book').toggle('slow', function() {
      // Animation complete.
    });
  });
</script>