今天我来写个文章，说说怎么搞一个图片折叠和展开的效果。这个东西其实挺简单的， 摸个底。 但是网上好多教程都写得太复杂了我来写个简单点的，大家也能看懂。

先来写HTML

先说说 我们要写一个HTML页面里面放一个按钮和一个图片的容器。这个按钮就是用来点一下展开或者收起来的。然后我们再写一个空的div，等下图片会放进去。

+

这个按钮的id是toggleButton，点一下就调用toggleImage这个函数。这个函数是用js写的，后面会讲。

再来写JavaScript

JavaScript这部分是用来控制点按钮之后图片出来还是不出来的。我们先定义一个变量， 佛系。 叫isImageOpen，一开始是false，就是没展开。

var isImageOpen = false;
function toggleImage {
  var button = document.getElementById;
  var container = document.getElementById;
  if  {
    container.innerHTML = '';
    button.innerHTML = '+';
    isImageOpen = false;
  } else {
    container.innerHTML = '';
    button.innerHTML = '-';
    isImageOpen = true;
  }
}

这个函数就是点一下按钮， 如果图片出来了就把它关掉，如果没出来就把它打开。就是这么简单，完善一下。。

加点CSS

换句话说... 我们再加点样式，让页面好看一点。比如加个背景色，或者字体大点什么的。

#imageContainer {
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
  margin-top: 10px;
}

这样子页面好看点，你们可以自己改改。

完整代码

再说说把HTML、 CSS、JS拼起来就是一个完整的页面了。点按钮图片就出来再点一下就没了。是不是很简单，等着瞧。？

+

这样子一个页面就出来了 点一下按钮，图片就出来了再点一下就没了。是不是很牛？

再说说

这个功能就是这么简单，大家别想太复杂。写个按钮，点一下展开， C位出道。 再点一下关掉。用js控制一下再加点css好看点。完事了。

如果你们想加更多功能， 比如动画啊、滑动啊，那就再加js，或者用什么框架， 切中要害。 比如jQuery，但我不会写那么复杂，简单点好。

就这样子，大家自己试试吧。