html collapsible_message_panels.html

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html collapsible_message_panels.html相关的知识，希望对你有一定的参考价值。

.post { background: #ccc; }
.header { background: #ddd; }
.content { background: #eee; }
$(function(){
    $('.header').click(function(){
        $(this).next().stop().animate({height: 'toggle'}, 250);
    });
    
    $('#hide_all').click(function(){
        $('.content').slideUp(250);
    });
    
    $('#show_all').click(function(){
        $('.content').slideDown(250);
    });
});
<html>
<head>
    <link rel="stylesheet" href="style.css" />
    <script src='script.js'></script>
	<title></title>
</head>

<body>
    <!-- our standard data container -->
    <div class="post">
        <!-- clicking on the header will make the .content slide up -->
        <div class="header">Text</div>
        
        <!-- content should be placed here whose visibility you can toggle -->
        <div class="content">Hey there! I'm content!</div>
    </div>
    <div class="post">
        <div class="header">Text</div>
        <div class="content">Hey there! I'm content!</div>
    </div>
    <div class="post">
        <div class="header">Text</div>
        <div class="content">Hey there! I'm content!</div>
    </div>
    <button id="hide_all">Hide All</button>
    <button id="show_all">Show All</button>
</body>
</html>

以上是关于html collapsible_message_panels.html的主要内容，如果未能解决你的问题，请参考以下文章

html IF_06_07_home.page.html

html IF_06_06_home.page.html

html IF_04_19_Actionsheet_HTML

html IF_04_17_AlertController_HTML

html IF_04_15_ToastController_HTML

html IF_04_13_LoadingController_HTML