前端手风琴的效果

1、插件式（jqueyr）(推荐)

<div>
    <label for="label-1" id="item1"><i class="icon-globe" id="i1"></i>Label One</label>
    <div class="content" id="a1">
      <h4>Accordion Menu</h4>
      <p>Web page backgrounds used to be commonplace, but they became unpopular once designers figured out
        that visitors to web pages didn’t want their eyes wrenched out by gaudy tiled background patterns. With
        text being as hard to read on-screen as it is, it’s adding insult to injury to inflict some nasty paisley mosaic
        background (or worse) on the poor reader, too.</p>
      <h6>The following collection of Web sites offers some outstanding references on
        CSS and its proper use on well-crafted Web pages. The very first reference
        from</h6>
    </div>
  </div>
  <div>
    <label for="label-2" id="item2"><i class="icon-leaf" id="i2"></i>Label Two</label>
    <div class="content" id="a2" style="display: none;">
      <h4>Accordion Menu</h4>
      <p>Web page backgrounds used to be commonplace, but they became unpopular once designers figured out
        that visitors to web pages didn’t want their eyes wrenched out by gaudy tiled background patterns. With
        text being as hard to read on-screen as it is, it’s adding insult to injury to inflict some nasty paisley mosaic
        background (or worse) on the poor reader, too.</p>
        <h6>The following collection of Web sites offers some outstanding references on
        CSS and its proper use on well-crafted Web pages. The very first reference
        </h6>
    </div>
  </div>
<script>
$(document).ready(function(){
	var label= $('label');
	var content= $('.content');
	$('.content').not(":first").hide();
	$('label').on("click",function(){
		var labelClicked = $(this);
		var labelContent = labelClicked.next();
		if(labelContent.is(":visible")) {
			return;
		}
		content.slideUp("normal");
		labelContent.slideDown("slow");
	});
});
</script>

2、插件式（Jquery）

这种直接在html写一个ul，按照一定规则放进去就行了，需要jquery的cbpNTAccordion，特点就是快！
代码如下

//html代码块
<ul id="cbp-ntaccordion" class="cbp-ntaccordion">
					<li>
						<h3 class="cbp-nttrigger">Oat cake tootsie roll</h3>
						<div class="cbp-ntcontent">
							<p>Jelly sweet roll dragée gummies. Jelly-o cotton candy gingerbread. Dessert tart bear claw gummi bears I love oat cake cotton candy sesame snaps carrot cake. Croissant marshmallow tiramisu icing soufflé chocolate cake. I love pie icing. Sweet I love sweet roll cheesecake dessert. Tiramisu gingerbread I love. Muffin chocolate cake powder cheesecake oat cake tootsie roll candy soufflé. Brownie toffee powder tiramisu. Wafer I love jujubes croissant. Chocolate cake candy jujubes tootsie roll bonbon toffee I love. Topping candy jelly-o. Halvah faworki I love I love toffee pastry icing chupa chups. Pie gingerbread candy canes oat cake.</p>
							<ul class="cbp-ntsubaccordion">
								<li>
									<h4 class="cbp-nttrigger">Donut pastry</h4>
									<div class="cbp-ntcontent">
										<p>Gingerbread cotton candy halvah gingerbread. Apple pie wypas liquorice I love chocolate cake I love. Jelly cotton candy wypas lemon drops. Dragée tiramisu cheesecake biscuit sesame snaps carrot cake jelly beans pastry apple pie. Chocolate cake cotton candy candy canes brownie ice cream. Muffin chocolate cake jelly-o cake pudding. Jujubes I love cookie. I love cupcake I love bear claw sweet croissant. Wypas bonbon chocolate cake bonbon bear claw gummies. Liquorice danish jelly tootsie roll. I love danish icing lemon drops dessert pie jujubes. Fruitcake wafer I love biscuit. Donut pastry apple pie sugar plum soufflé ice cream tart bonbon candy.</p>
									</div>
								</li>
								<li>
									<h4 class="cbp-nttrigger">Carrot cake</h4>
									<div class="cbp-ntcontent">
										<p>Wafer muffin cupcake apple pie tootsie roll I love. Carrot cake apple pie I love dessert. I love carrot cake lollipop jelly jelly-o brownie cake. Croissant brownie donut gingerbread dessert icing. Sugar plum jelly candy pudding liquorice liquorice cotton candy pie. Powder sesame snaps I love chocolate bar bonbon. Pudding gummi bears donut applicake carrot cake I love I love icing cake.</p>
									</div>
								</li>
								<li>
									<h4 class="cbp-nttrigger">Tootsie roll marshmallow</h4>
									<div class="cbp-ntcontent">
										<p>I love tootsie roll marshmallow. Halvah jelly bear claw lemon drops lollipop. Brownie tiramisu I love I love halvah wafer. Powder jelly beans sesame snaps. Powder biscuit I love wypas soufflé apple pie marzipan. Cheesecake apple pie halvah croissant jelly I love.</p>
									</div>
								</li>
							</ul>
						</div>
					</li>
				</ul>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.cbpNTAccordion.min.js"></script>
<script>
$( function() {

	$( '#cbp-ntaccordion' ).cbpNTAccordion();

} );
</script>

3、插件式（bootstrap）

<section class="ui3g-container">
		  <div class="col-md-6 col-sm-6">
		    <div class="panel-group wrap" id="accordion" role="tablist" aria-multiselectable="true">
		      <div class="panel">
		        <div class="panel-heading" role="tab" id="headingOne">
		          <h4 class="panel-title">
		        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
		          Collapsible item #1
		        </a>
		      </h4>
		        </div>
		        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
		          <div class="panel-body">
		            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
		          </div>
		        </div>
		      </div>
		    </div>
		  </div>
	</section>
	
<script src="js/2.11/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
	<script src='js/bootstrap/3.3.5/js/bootstrap.min.js'></script>
	<script type="text/javascript">
		$(document).ready(function() {
		  $('.collapse.in').prev('.panel-heading').addClass('active');
		  $('#accordion, #bs-collapse')
		    .on('show.bs.collapse', function(a) {
		      $(a.target).prev('.panel-heading').addClass('active');
		    })
		    .on('hide.bs.collapse', function(a) {
		      $(a.target).prev('.panel-heading').removeClass('active');
		    });
		});
	</script>

4、CSS3

这种如果是图片的手风琴式的，效果看起来更酷炫一些

//这一段必须要加进入，核心代码
<style>
			body {
				background: #D5DED9;
				font-family: Arial, Helvetica, sans-serif;
			}
			h1, h2, h3, h4, h5, h6 {
				font-family: Georgia, serif;
			}
			h1{
				font-size:330%;
				text-shadow:2px 2px 1px white;
			}
			p {
				line-height: 140%;
				font-size: 90%;
			}
			#accordion {
				margin: 100px;
			}
			#accordion article {
				-webkit-transform: perspective(900px) rotateY(60deg);
				-webkit-transition: all 0.7s ease-in-out;
				background: #fff;
				border: 1px solid #f3f3f3;
				box-shadow: 0px 5px 15px gray;
				float: left;
				height: 420px;
				margin-left: -180px;
				padding: 20px;
				width: 220px;
			}
			#accordion article:first-child {
				margin-left: 0px;
			}
			#accordion article img {
				float: left;
				padding: 0 10px 5px 0;
			}
			#accordion article:hover {
				-webkit-transform: perspective(0) rotateY(-10deg);
				margin: 0 140px 0 -60px;
			}
		</style>

//按照下面的格式进行循环添加
<div id="accordion">
			<article>
				<h2>Section 1</h2>
				<img src="img/img1.jpg" width="100" height="88">
				<p>
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
				</p>
				<p>
					Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
				</p>
			</article>
			<article>
				<h2>Section 2</h2>
				<img src="img/img2.jpg" width="100" height="88">
				<p>
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
				</p>
				<p>
					Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
				</p>
			</article>
</div>