JavaScript展开收起效果实现

像下面这样写：

<div id="toggleContent" style="display: none;">
  <p>点一下按钮就能看到我了。</p>
</div>
<button id="toggleButton">切换显示</button>

JS 部分也不复杂：

document.getElementById('toggleButton').addEventListener('click', function() {
  var content = document.getElementById('toggleContent');
  content.style.display = content.style.display === 'none' ? 'block' : 'none';
});

你要是想更顺滑点，可以加点CSS 的过渡效果，比如：

#toggleContent {
  transition: all 0.3s ease;
}

懒得写太多逻辑？jQuery的slideToggle()就挺方便：

$(document).ready(function() {
  $('#toggleButton').click(function() {
    $('#toggleContent').slideToggle(300);
  });
});

如果你喜欢收集特效代码，下面几个链接还蛮实用的：