jQuery's approach to stretch and close panel
- 2020-06-03 05:44:50
- OfStack
An example of jQuery shows how to extend and close panel. Share to everybody for everybody reference. Specific implementation methods are as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery Extended and closed Panel demo </title>
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { padding: 5px; background: #96E555; cursor: pointer }
.content { padding: 10px; text-indent: 2em;
border-top: 1px solid #0050D0;display:block;
}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next("div.content").slideUp();
},function(){
$(this).next("div.content").slideDown();
})
})
</script>
</head>
<body>
<div id="panel">
<h5 class="head"> Click here to </h5>
<div class="content">
Expanded and folded content! Expanded and folded content! Expanded and folded content!
Expanded and folded content! Expanded and folded content! Expanded and folded content!
Expanded and folded content! Expanded and folded content!
</div>
</div>
<div>https://www.ofstack.com/</div>
</body>
</html>Hopefully, this article has been helpful in your jQuery programming.