html5--"Click Show hidden Content

<details> browser support is poor, you can use JavaScript to implement this feature.

1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8">5 <title>JS Click Show hidden Content</title>6 <styletype= "Text/css" >7 Body{font-size:12px;}8 span{Font-weight:Bold;}9 Details{Ten Overflow:Hidden; One Height:0; A Padding-left:200px; - position:relative; - Display:Block; the     } - Details[open]{Height:Auto;} - </style> - </Head> +  - <Body> + <spanOnClick= "Spanclick ();">Click Show Content</span> A <DetailsID= "DETAILS1"> at www.calamus.cn - </Details> - <Script> - functionSpanclick () { -     varobj=document.getElementById ("DETAILS1"); -     varatt=Obj.getattribute ("Open"); in     if(Att!="Open"){ - Obj.setattribute ("Open","Open"); to         } +     Else{ - Obj.removeattribute ("Open"); the         } *     } $ </Script>Panax Notoginseng </Body> - </HTML>

Click to appear/disappear

html5--"Click Show hidden Content