jQuery Bootstrap扁平垂直手風琴特效



100 398 133



特效描述:jQuery Bootstrap扁平 垂直手風琴特效,jQuery Bootstrap扁平垂直手風琴特效

代碼結構

1. 引入CSS

<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/jquery-2.1.1.min.js " type="text/javascript"></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

3. HTML代碼

<section class="zzsc-container">
	<div class="container">
	  <div class="col-md-6 col-sm-6">
		<h3>Default collapse with scaling icon</h3>
		<div class="panel-group wrap" id="bs-collapse">
		  <div class="panel">
			<div class="panel-heading">
			  <h4 class="panel-title">
			<a data-toggle="collapse" data-parent="#" href="#one">
			  Collapse item #1
			</a>
		  </h4>
			</div>
			<div id="one" class="panel-collapse collapse">
			  <div class="panel-body">
				Where now are the horse and the rider? Where is the horn that was blowing? Where is the helm and the hauberk, and the bright hair flowing?
			  </div>
			</div>
		  </div>
		  <!-- end of panel -->
		  <div class="panel">
			<div class="panel-heading">
			  <h4 class="panel-title">
			<a data-toggle="collapse" data-parent="#" href="#two">
			 Collapse item #2
			</a>
		  </h4>
			</div>
			<div id="two" class="panel-collapse collapse">
			  <div class="panel-body">
				Where is the harp on the harpstring, and the red fire glowing? Where is the spring and the harvest and the tall corn growing?
			  </div>
			</div>
		  </div>
		  <!-- end of panel -->
		  <div class="panel">
			<div class="panel-heading">
			  <h4 class="panel-title">
			<a data-toggle="collapse" data-parent="#" href="#three">
			  Collapse item #3
			</a>
		  </h4>
			</div>
			<div id="three" class="panel-collapse collapse">
			  <div class="panel-body">
				The days have gone down in the West behind the hills into shadow. Who shall gather the smoke of the deadwood burning, Or behold the flowing years from the Sea returning?
			  </div>
			</div>
		  </div>
		  <!-- end of panel -->
		  <div class="panel">
			<div class="panel-heading">
			  <h4 class="panel-title">
			<a data-toggle="collapse" data-parent="#" href="#four">
			 Collapse item #4
			</a>
		  </h4>
			</div>
			<div id="four" class="panel-collapse collapse in">
			  <div class="panel-body">
				They have passed like rain on the mountain, like a wind in the meadow; The days have gone down in the West behind the hills into shadow.
			  </div>
			</div>
		  </div>
		  <!-- end of panel -->
		</div>
		<!-- end of #bs-collapse  -->
	  </div>
	  <div class="col-md-6 col-sm-6">
		<h3>Accordion collapse with rotating icon</h3>
		<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>
		  <!-- end of panel -->
		  <div class="panel">
			<div class="panel-heading" role="tab" id="headingTwo">
			  <h4 class="panel-title">
			<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
			  Collapsible item #2
			</a>
		  </h4>
			</div>
			<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
			  <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>
		  <!-- end of panel -->
		  <div class="panel">
			<div class="panel-heading" role="tab" id="headingThree">
			  <h4 class="panel-title">
			<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
			  Collapsible item #3
			</a>
		  </h4>
			</div>
			<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
			  <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>
		  <!-- end of panel -->
		  <div class="panel">
			<div class="panel-heading" role="tab" id="headingFour">
			  <h4 class="panel-title">
			<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
			  Collapsible item #4
			</a>
		  </h4>
			</div>
			<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
			  <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>
		  <!-- end of panel -->
		</div>
		<!-- end of #accordion -->
	  </div>
	  <!-- end of wrap -->
	</div>
	<!-- end of container -->
</section>
<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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 文字疊加 文字層疊 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 文字延遲加載 文字延遲 文字加載 文字全屏 文字淡出淡進 文字淡出 文字淡進 文字翻轉 文字旋轉 文字放大縮小 文字縮放 文字大小 文字放大 文字縮小 文字變大 文字變小 文字收縮展開 文字收縮 文字展開 文字提示框 提示文字 文字拖動 文字拖拽 滾動切換 滾動條切換 滑動選項卡 滑動切換 360全景 360度全景 h5文字動畫 h5文字邊框動畫 html5文字動畫 html5文字邊框動畫 文字滾動 文字無縫滾動 文字間歇滾動 文字滑動 文字滑塊 文字切換 文字選項卡 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 收縮展開 展開收縮 收縮 展開 圖片文字 文字導航菜單 文字導航 文字菜單 文字 文字插件 文字收縮展開 文字收縮 文字展開 滑動手風琴 文字列表 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子