jquery method to implement simple collapse and expansion of web page panels

jquery method to implement simple collapse and expansion of web page panels_jquery

WBOY

Release： 2016-05-16 15:41:16

Original

1195 people have browsed it

The example in this article describes how jquery implements simple closing and expanding of web page panels. Share it with everyone for your reference. The details are as follows:

This is a common code for collapsing (shrinking) and expanding panels on web pages. It uses the jQuery plug-in to simplify the code. Click the title bar of the panel to collapse or expand the layer. It is a very popular effect on the Internet. There are really many functions that can be expanded from this. As long as you use your brain, you can definitely do it.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-simple-hidden-show-web-table-codes/

The specific code is 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>网页上的层收缩、伸展面板代码</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 type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
 $("#panel h5.head").toggle(function(){
  $(this).next("div.content").hide();
 },function(){
  $(this).next("div.content").show();
 })
})
</script>
</head>
<body>
<div id="panel">
 <h5 class="head">点击此处标题可展开</h5>
 <div class="content">
  一款基于jquery的伸展面板代码，点击面板的标题栏即可折叠、或展开这个层，貌似网上很流行的效果，引用了jQuery插件，使得本款效果更加的简洁实用， </div>
</div>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s jquery programming design.