首页 > html > element_relation > HTML Element Style - 如何单击查看隐藏的内容

HTML Element Style - 如何单击查看隐藏的内容

element_relation 【element_relation】
我们想知道如何单击查看隐藏的内容。
代码展示 运行结果 

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#toggle {
  height: 30px;
  position: relative;
  z-index: 2;
}

#toggle a {
  position: absolute;
}

#box {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  -webkit-transition: all .4s ease-out;
  -moz-transition: all .4s ease-out;
  transition: all .4s ease-out;
}

#slidebox:target #box {
  max-height: 100px;
  opacity: 1;
}

#slidebox:target .top {
  opacity: 0;
  pointer-events: none;
}
body {
  max-width: 600px;
  margin: 0 auto;
}
</style>

</head>
<body id="slidebox">
  <div id="toggle">
    <a class="bot" href="#">Click to view the hidden content</a> 
    <a class="top" href="#slidebox">Click to view the hidden content</a>
  </div>
  <div id="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Vivamus magna. Cras in mi at felis aliquet congue. Donec eu libero
      sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
      placerat eleifend leo.</p>
  </div>
  <p>Pellentesque habitant morbi tristique senectus et netus et
    malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
    vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet
    quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat
    eleifend leo.</p>
</body>
</html>