<!DOCTYPE html>਀㰀栀琀洀氀㸀 
<head>਀㰀猀挀爀椀瀀琀 猀爀挀㴀∀栀琀琀瀀猀㨀⼀⼀愀樀愀砀⸀最漀漀最氀攀愀瀀椀猀⸀挀漀洀⼀愀樀愀砀⼀氀椀戀猀⼀樀焀甀攀爀礀⼀㄀⸀㄀㄀⸀㌀⼀樀焀甀攀爀礀⸀洀椀渀⸀樀猀∀㸀㰀⼀猀挀爀椀瀀琀㸀 
<script> ਀␀⠀搀漀挀甀洀攀渀琀⤀⸀爀攀愀搀礀⠀昀甀渀挀琀椀漀渀⠀⤀笀 
    $("#flip").click(function(){਀        ␀⠀∀⌀瀀愀渀攀氀∀⤀⸀猀氀椀搀攀吀漀最最氀攀⠀∀猀氀漀眀∀⤀㬀 
    });਀紀⤀㬀 
</script>਀ 
<style> ਀⌀瀀愀渀攀氀Ⰰ ⌀昀氀椀瀀 笀 
    padding: 5px;਀    琀攀砀琀ⴀ愀氀椀最渀㨀 挀攀渀琀攀爀㬀 
    background-color: #e5eecc;਀    戀漀爀搀攀爀㨀 猀漀氀椀搀 ㄀瀀砀 ⌀挀㌀挀㌀挀㌀㬀 
}਀ 
#panel {਀    瀀愀搀搀椀渀最㨀 㔀　瀀砀㬀 
    display: none;਀紀 
</style>਀㰀⼀栀攀愀搀㸀 
<body>਀  
<div id="flip">Click to slide the panel down or up</div>਀㰀搀椀瘀 椀搀㴀∀瀀愀渀攀氀∀㸀䠀攀氀氀漀 眀漀爀氀搀℀㰀⼀搀椀瘀㸀 
਀ 
&nbsp;਀㰀栀㈀㸀褀ꨉ뀉쬉锉촉ꐉ ꨀ촉뀉쬉霉촉뀉븉급 輀뀉 销쬉ꄉ ꠀ뼉급촉ꠉ윉 ꘀ윉�븉 뤀눉쬉㨉㰀⼀栀㈀㸀 
਀㰀栀爀 ⼀㸀 
਀㰀瀀爀攀㸀☀氀琀㬀℀䐀伀䌀吀夀倀䔀 栀琀洀氀☀最琀㬀 
&lt;html&gt;਀☀氀琀㬀栀攀愀搀☀最琀㬀 
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;਀☀氀琀㬀猀挀爀椀瀀琀☀最琀㬀  
$(document).ready(function(){਀    ␀⠀∀⌀昀氀椀瀀∀⤀⸀挀氀椀挀欀⠀昀甀渀挀琀椀漀渀⠀⤀笀 
        $("#panel").slideToggle("slow");਀    紀⤀㬀 
});਀☀氀琀㬀⼀猀挀爀椀瀀琀☀最琀㬀 
਀☀氀琀㬀猀琀礀氀攀☀最琀㬀  
#panel, #flip {਀    瀀愀搀搀椀渀最㨀 㔀瀀砀㬀 
    text-align: center;਀    戀愀挀欀最爀漀甀渀搀ⴀ挀漀氀漀爀㨀 ⌀攀㔀攀攀挀挀㬀 
    border: solid 1px #c3c3c3;਀紀 
਀⌀瀀愀渀攀氀 笀 
    padding: 50px;਀    搀椀猀瀀氀愀礀㨀 渀漀渀攀㬀 
}਀☀氀琀㬀⼀猀琀礀氀攀☀最琀㬀 
&lt;/head&gt;਀☀氀琀㬀戀漀搀礀☀最琀㬀 
 ਀☀氀琀㬀搀椀瘀 椀搀㴀∀昀氀椀瀀∀☀最琀㬀䌀氀椀挀欀 琀漀 猀氀椀搀攀 琀栀攀 瀀愀渀攀氀 搀漀眀渀 漀爀 甀瀀☀氀琀㬀⼀搀椀瘀☀最琀㬀 
&lt;div id="panel"&gt;Hello world!&lt;/div&gt;਀ 
&lt;/body&gt;਀☀氀琀㬀⼀栀琀洀氀☀最琀㬀㰀⼀瀀爀攀㸀 
਀㰀栀爀 ⼀㸀 
਀☀渀戀猀瀀㬀 
਀☀渀戀猀瀀㬀 
਀㰀⼀戀漀搀礀㸀 
</html>਀�