index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.1.0.min.js"></script>
<script src="myjs3.js"></script>
<style>
#content,#flipshow,#fliphide,#fliptoggle{
padding:5px;
text-align:center;
background-color: #ece023;
border:solid 1px #ece999;
}
#content{
padding:50px;
display:none;
}
</style>
</head>
<body> <div id="flipshow">出现</div><!-- 点击滑动出现 -->
<div id="fliphide">隐藏</div><!-- 点击滑动隐藏 -->
<div id="fliptoggle">隐藏/出现</div><!-- 点击滑动隐藏/出现 -->
<div id="content">Hello world</div> </body>
</html>
js代码：
$(document).ready(function(){
$("#flipshow").click(function(){//点击滑动出现
$("#content").slideDown();
});
$("#fliphide").click(function(){//点击滑动隐藏
$("#content").slideUp();
});
$("#fliptoggle").click(function(){//点击滑动隐藏/出现
$("#content").slideToggle();
});
});