<! DOCTYPE html> <pead> <meta charset = "UTF-8"/> <title> jQuery drop-down effect </title> <style type = "text/css"> body {margin: 0 auto; padding: 0; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif;} a: focus {outline: none;} # panel {background: #69C7F7; height: 200px; display: none ;}. slide {margin: 0; padding: 0; border-top: solid 4px # F27613 ;}. btn-slide {background: # F27613 url (http://files.jb51.net/file_images/article/201212/20121225165932118.gif) no-repeat right-50px; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: # fff; text-decoration: none ;}. active {background-position: right 12px ;} </style> </pead> <body> you cannot refresh the demo. <p class = "slide"> click to try it </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]