javascript函数在单击时展开html部分

我有一个html网页，我有一个列表，当点击一个项目时，它会扩展一些文本，使容器的高度增加。检测列表项收缩的最佳方法是什么

例如，当我单击一个项目时，它会展开，并且每个项目的大小都会正确地增加。但是，当我再次单击同一项时，它会再次增加容器，因为我不确定如何区分展开和收缩，对列表上的所有项使用一个函数

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

正如您在单击时看到的，我希望它增加大约中等高度，但我希望在第二次单击时减少大约中等高度。

有一个切换功能，可以为您执行此操作

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

点击这里
$（'#clickme'）。单击（函数（）{
$（'#book'）。切换（'slow'，function（）{
//动画完成。
});
});

使用if-else条件。如果已展开，则关闭。