js:

<script type="text/javascript">
$('#p2').panel({
title: 'panel1',
closable: false,
collapsible: true,
border: false,
collapsed: true,
//href: "url",
onOpen: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
},
onBeforeCollapse: function () {
$($(this).panel('header')).removeClass('openPanelClass');
},
onBeforeExpand: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
} });
$($('#p2')).panel('header').click(function () {
$('#p2').panel('expand', true);
$('#p2').panel('collapse', true);
});
$('#p3').panel({
title: 'panel2',
closable: false,
collapsible: true,
border: false,
collapsed: true,
//href: "url",
onOpen: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
},
onBeforeCollapse: function () {
$($(this).panel('header')).removeClass('openPanelClass');
},
onBeforeExpand: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
}
});
$($('#p3')).panel('header').click(function () {
$('#p3').panel('expand', true);
$('#p3').panel('collapse', true);
});
$('#p4').panel({
title: 'panel3',
closable: false,
collapsible: true,
border: false,
collapsed: true,
//href: "url",
onOpen: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
},
onBeforeCollapse: function () {
$($(this).panel('header')).removeClass('openPanelClass');
},
onBeforeExpand: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
}
});
$($('#p4')).panel('header').click(function () {
$('#p4').panel('expand', true);
$('#p4').panel('collapse', true);
});
$('#p5').panel({
title: 'panel4',
closable: false,
collapsible: true,
border: false,
collapsed: true,
//href: "url",
onOpen: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
},
onBeforeCollapse: function () {
$($(this).panel('header')).removeClass('openPanelClass');
},
onBeforeExpand: function () {
$($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
}
});
$($('#p5')).panel('header').click(function () {
$('#p5').panel('expand', true);
$('#p5').panel('collapse', true);
});
</script>

html:

 <div style="margin: 5px">
<div id="p2" style="width: 985px;"> </div>
</div>
<div style="margin: 5px">
<div id="p3" style="width: 985px;"> </div>
</div>
<div style="margin: 5px">
<div id="p4" style="width: 985px;"> </div>
</div>
<div style="margin: 5px">
<div id="p5" style="width: 985px;"> </div>
</div>

panel Expansion of , An application that closes . More articles about

  1. jquery Expand the closing effect

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Simple support for unfolding closed tab Label code

    Simple support for unfolding closed tab Label code , from huiyi8 Material network provides . TAB Tag code download :http://www.huiyi8.com/tab/

  3. SELinux Tolerance mode (permissive) Forced mode (enforcing) close (disabled) The transformation between several modes

    http://blog.sina.com.cn/s/blog_5aee9eaf0100y44q.html stay CentOS6.2 Install in intel Of c++ and fortran The compiler for , Come across a question about S ...

  4. solve DWZ(JUI) Of panel Click the close or open button The label you wrote disappears

    Problem description :DWZ Of panel The panel is commonly used , We often need to add a few more buttons to the title bar , As shown in the figure below, the problem comes out , After adding the button , Click the panel shrink button , The added button disappears and the panel shrinks click event , It's also bound to the new button , ...

  5. About win8.1&ldquo; The connection was closed by the remote computer &rdquo; A solution for

    I just show up when I'm connected " The connection was closed by the remote computer ", And then I thought it might be win8 After updating the network protocol Something is wrong. , Later, I found out by accident that e When Xinxin is started for the first time, there will be many more network cards in the network adapter , Three of them are with exclamations ...

  6. IOS Realization QQ Friends group expand close function

    Post the core code   Mainly talking about the train of thought . - (void)nameBtnClick:(myButton *)sender { // Get the corresponding section self.clickIndex = s ...

  7. HTML Click the button to close the page in several ways and cancel

    1. Close the window without any prompt js Code <input type="button" name="close" value=" close " oncl ...

  8. Oracle Four modes of opening and closing

    >1 Start database stay cmd Command window , Direct input "sqlplus", Go straight into oracle Management interface , After entering the user name and password , Start starting the database , There are three steps to starting the database : Boot instance . Load database . hit ...

  9. C# There are several ways to start an external program and wait for it to close

    1. Start an external program , Don't wait for it to exit . 2. Start an external program , Wait for it to exit . 3. Start an external program , Waiting indefinitely for its exit . 4. Start an external program , It exits through event monitoring . // using System.Diagnosti ...

Random recommendation

  1. QT toLocal8Bit Strange question

    #include "mainwindow.h" #include "ui_mainwindow.h" #include<QDebug> MainWi ...

  2. Unity3D shader Script

    Unity Medium shader Script , It's called shaderlab The script language to write . This unity Medium shader It's not just DX in HLSL Write vertices and pixels shader, It should be said that it corresponds to DX Medium Effect Script , Defined ...

  3. mysql How to log in

    mysql -uroot -p After returning , Input password , Just go back . If you don't change it yourself , The default password is empty .

  4. WeChat JS-SDK The actual sharing function

    To clean up the Internet , Rectify the behavior of inducing sharing and attention , Wechat on 2014 year 12 month 30 Date issued < Wechat public platform announcement on rectifying induced sharing and induced attention behavior >, Wechat platform developers found that , The original wechat sharing function can't be used , stay ipho ...

  5. standard I/O buffer : Full buffer 、 The line buffer 、 No buffer

    explain : I just integrated the network resources , Easy to learn -.- The stream based operation will finally call read perhaps write Function I/O operation . In order to make the execution of the program most efficient , Stream objects generally provide buffers , To reduce the cost of calling the system I/O The number of library functions . ...

  6. redis object

    redis Through the data structure of the previous articles, we construct an object system , This object system contains string objects , List objects , Hash object , A collection of objects , An orderly collection of objects Every object is an object redisobject typedef struct r ...

  7. Ban urllib3 Security request warning for

    Report a mistake : Disable the warning : import urllib3 urllib3.disable_warnings()

  8. redis Lock mechanism introduction and examples

    from :https://m.jb51.net/article/154421.htm Today, I'd like to share an article about redis Lock mechanism introduction and examples , Xiaobian thinks the content is very good , Now share with you , It has a good reference value , need ...

  9. [JZOJ5987] Cactus poison problem

    Description Solution Routine questions ... It's all fuckin 'routine ... First, how to deal with cactus , You can get it online \(lct\) maintain , Or treeing after offline .(\(lct\) Maintenance is too poisonous to write , I cut the tree offline and ...

  10. The front-end study -- Css -- Text style

    text-transform Can be used to set the case of text Optional value : none The default value is , Display as you like , Do nothing capitalize Capitalize the first letter of a word , Identify words by spaces uppercase the ...