实现效果:
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
<script src="test.js"></script>
</head>
<body>
<div id="showhide">
<p>这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字</p>
<div id="show" style="display:none;">
<p>这里是文字这里是文字这里是文字这里是文字这里是文字这里是</p>
<p>这里是文字这里是文字这里是文字这里是文字这里是文字这里是</p>
</div>
</div>
<p class="slide">
<a href="javascript:showdiv();" id="strHref" class="btn-slide">展开</a>
</p>
</body>
</html>
CSS代码:style.css
body {
margin: 0 auto;
padding: 0;
}
#showhide {
width: 600px;
margin: 100px auto 0;
padding: 5px;
border: 1px solid gray;
}
.slide {
width: 600px;
margin: 0 auto;
}
.btn-slide {
background: gray;
text-align: center;
width: 120px;
height: 30px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
color: #fff;
text-decoration: none;
}
javaScript代码:test.js
function showdiv() {
document.getElementById("show").style.display = "block";
document.getElementById('strHref').innerHTML="收起";
document.getElementById('strHref').href="javascript:hidediv();";
}
function hidediv() {
document.getElementById('show').style.display='none';
document.getElementById('strHref').innerHTML="展开";
document.getElementById('strHref').href="javascript:showdiv();";
}