Home >Web Front-end >JS Tutorial >jquery method to implement simple collapse and expansion of web page panels_jquery

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

WBOYOriginal: 2016-05-16 15:41:161223browse

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>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jquery implements clickable telescopic and expandable menu effect code_jqueryNext article：jquery implements clickable telescopic and expandable menu effect code_jquery

See more

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

Related articles