问题
How can I make an accordion in plain HTML?
- <table border="1">
<tr>
<th><input name="checkbox" type="checkbox" id="selectall"/></th>
<th>Multipal Row </th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
<td>First Chek </td>
<td>1</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
<td>Second Chek </td>
<td>2</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
<td>Third Chek </td>
<td>3</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
<td>Fourth Chek </td>
<td>4</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
<td>Five Chek </td>
<td>5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="6"/></td>
<td>Six Chek </td>
<td>6</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="7"/></td>
<td>Seven Chek </td>
<td>7</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="8"/></td>
<td>Eight Chek </td>
<td>8</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="9"/></td>
<td>Nine Chek </td>
<td>9</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="10"/></td>
<td>Ten Chek </td>
<td>10</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="11"/></td>
<td>Elevan Chek </td>
<td>11</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="12"/></td>
<td>Twel Chek </td>
<td>12</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="13"/></td>
<td>Thirty Chek </td>
<td>13</td>
</tr> </table>
回答1:
I think you should have a look at jQuery UI.
http://docs.jquery.com/UI/Accordion
回答2:
Accordion in only html here is the list of links:
1> http://media02.hongkiat.com/css-based-accordion/demo/index.html.
2>http://andornagy.com/pure-css-accordion/
3>http://tympanus.net/codrops/2012/02/21/accordion-with-css3/
回答3:
Try this
http://csswizardry.com/2011/02/pure-css3-accordion/
回答4:
You could always use the plain HTML5 details element. Here's a minimal example with just HTML:
<details>
<summary>This is the title of the details tag</summary>
<p>Here's a paragraph inside a details element</p>
Here's some text after the paragraph
</details>Here's another example with CSS:
details {
border: 1px solid #aaa;
border-radius: 4px;
padding: .75em .75em 0;
}
summary {
font-weight: bold;
margin: -.75em -.75em 0;
padding: .75em;
background-color: steelblue;
color: white;
}
details[open] {
padding: .75em;
}
details[open] summary {
border-bottom: 1px solid #aaa;
margin-bottom: .75em;
}<details>
<summary>Details</summary>
Something that's hidden by default.
</details>回答5:
I would recommend the following tutorial : https://codepen.io/abergin/pen/ihlDf?editors=1100#0 it does exactly what you want.
The HTML code :
<h1>CSS + HTML only Accordion Element</h1>
<ul>
<li>
<input type="checkbox" checked>
<i></i>
<h2>Languages Used</h2>
<p>This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.</p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>How it Works</h2>
<p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>Points of Interest</h2>
<p>By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.</p>
</li>
</ul>
And a heavier use of CSS :
$white: rgba(254,255,250,1)
$grey: rgba(220,231,235,1)
$red: rgba(255,104,115,1)
$black: rgba(48,69,92,0.8)
$sans: 'Titillium Web', sans-serif
.transition
transition: all 0.25s ease-in-out
.flipIn
animation: flipdown 0.5s ease both
.no-select
-webkit-tap-highlight-color: rgba(0,0,0,0)
-webkit-touch-callout: none
-webkit-user-select: none
-khtml-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
html
width: 100%
height: 100%
perspective: 900
overflow-y: scroll
background-color: $grey
font-family: $sans
color: $black
body
min-height: 0
display: inline-block
position: relative
left: 50%
margin: 90px 0
transform: translate( -50% , 0 )
box-shadow: 0 10px 0 0 $red inset
background-color: $white
max-width: 450px
padding: 30px
@media ( max-width:550px )
box-sizing: border-box
transform: translate( 0 , 0 )
max-width: 100%
min-height: 100%
margin: 0
left: 0
h1 , h2
color: $red
h1
text-transform: uppercase
font-size: 36px
line-height: 42px
letter-spacing: 3px
font-weight: 100
@extend .flipIn
h2
font-size: 26px
line-height: 34px
font-weight: 300
letter-spacing: 1px
display: block
background-color: $white
margin: 0
cursor: pointer
@extend .no-select
p
color: $black
font-size: 17px
line-height: 26px
letter-spacing: 1px
position: relative
overflow: hidden
max-height: 800px
@extend .transition
opacity: 1
transform: translate( 0 , 0 )
margin-top: 14px
z-index: 2
ul
list-style: none
perspective: 900
padding: 0
margin: 0
li
position: relative
padding: 0
margin: 0
padding-bottom: 4px
padding-top: 18px
border-top: 1px dotted $grey
@extend .flipIn
&:nth-of-type(1)
animation-delay: 0.5s
&:nth-of-type(2)
animation-delay: 0.75s
&:nth-of-type(3)
animation-delay: 1.0s
&:last-of-type
padding-bottom: 0
i
position: absolute
transform: translate( -6px , 0 )
margin-top: 16px
right: 0
&:before , &:after
content: ""
@extend .transition
position: absolute
background-color: $red
width: 3px
height: 9px
&:before
transform: translate( -2px , 0 ) rotate( 45deg )
&:after
transform: translate( 2px , 0 ) rotate( -45deg )
input[type=checkbox]
position: absolute
cursor: pointer
width: 100%
height: 100%
z-index: 1
opacity: 0
&:checked
&~p
margin-top: 0
max-height: 0
opacity: 0
transform: translate( 0 , 50% )
&~i
&:before
transform: translate( 2px , 0 ) rotate( 45deg )
&:after
transform: translate( -2px , 0 ) rotate( -45deg )
@keyframes flipdown
0%
opacity: 0
transform-origin: top center
transform: rotateX(-90deg)
5%
opacity: 1
80%
transform: rotateX(8deg)
83%
transform: rotateX(6deg)
92%
transform: rotateX(-3deg)
100%
transform-origin: top center
transform: rotateX(0deg)
回答6:
If you don't like jQuery, check out Uranium - you don't need to use any javascript and can just add some attributes to your HTML.
来源：https://stackoverflow.com/questions/8804113/how-to-create-an-accordion-menu-in-html-without-jquery