SOURCE

console 命令行工具 X clear

                    
>
console
$(function() {
	$("#collapset1").bootCollapse({type: 'normal'});
	$("#collapset2").bootCollapse({type: 'eachOne'});
  $("#collapset3").bootCollapse({width: 400});
});

;(function($) {
	"use strict";
	var Name = 'bootCollapse';
	var EventKey = '.bc.collapse';
	var DataApiKey = '.data-api';
	var Default = {
		type: 'normal'
	};
	var Event = {
	};
	var ClassName = {
	};
	
	var Collapse = function(element, options) {
		this.$element = $(element);
		this.options = $.extend({}, Default, options);
	};
	Collapse.prototype.init = function() {
		var that=this;
    if(this.options.width) {
      this.$element.css('width',this.options.width+'px');
    }
		if(this.options.type === 'normal') {
			this.$element.find(".nc-collapse header").click(function() {
				if($(this).parent().hasClass("active")) {
					$(this).parent().removeClass("active")
						.children("article").slideToggle();
				} else {
					$(this).parent().addClass("active")
						.children("article").slideToggle();
				}
			});
		} else if(this.options.type === 'eachOne') {
			this.$element.find(".nc-collapse header").click(function() {
				if($(this).parent().hasClass("active")) {
					$(this).parent().removeClass("active")
						.children("article").slideToggle();
				} else {
					that.$element.find("header").parent().removeClass("active")
						.children("article").slideUp();
					$(this).parent().addClass("active").children("article").slideToggle();	
				}	
			});	
		}
	};
		
	var old = $.fn.bootCollapse;
	$.fn.bootCollapse = function(option) {
			var $this = $(this),data = $this.data('collapse');
			var _options = typeof option == 'object' ? option : {};
			_options = $.extend({},$.fn.bootCollapse.defaults,_options);
			if(!data) {
				data = new Collapse(this,_options);
				$this.data('collapse', data);
			}
			data.init();
			return this;
	};
	$.fn.bootCollapse.defaults = {
		type: 'normal'
	};
	$.fn.bootCollapse.Constructor = Collapse;
	$.fn.bootCollapse.noConflict = function () {$.fn.bootCollapse = old;return this;};
	
})(jQuery);
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>

		<h3>1.正常展开</h3>
		<div class="nc-collapseset" id="collapset1">
			<div class="nc-collapse">
				<header><span></span>
					杨过</header>
				<article>杨过,名过,字改之,是金庸武侠小说《神雕侠侣》[1]  中的主人公,前作《射雕英雄传》中杨康与穆念慈之子,西毒欧阳锋的义子。名字为郭靖、黄蓉所取,取“有过则改之”之意。</article>
			</div>
			<div class="nc-collapse">
				<header><span></span>
					小龙女</header>
				<article>小龙女,是金庸小说《神雕侠侣》的女主角,金庸笔下广受读者喜爱的女角之一。容貌秀美若仙、清丽绝俗。性格宽容恬淡、天真可爱。武功轻灵飘逸,于婀娜妩媚中击敌制胜。</article>
			</div>
			<div class="nc-collapse">
				<header><span></span>
					黄药师</header>
				<article>黄药师,外号“东邪”,天下“五绝”之一,是金庸武侠小说《射雕英雄传》和《神雕侠侣》中的角色。是黄蓉之父,对其妻冯氏(小字阿衡)一往情深。。  </article>
			</div>
		</div>
				
		<h3>2.一次展开一个</h3>
		<div class="nc-collapseset" id="collapset2">
			<div class="nc-collapse">
				<header><span></span>
					杨过</header>
				<article>杨过,名过,字改之,是金庸武侠小说《神雕侠侣》[1]  中的主人公,前作《射雕英雄传》中杨康与穆念慈之子,西毒欧阳锋的义子。名字为郭靖、黄蓉所取,取“有过则改之”之意。</article>
			</div>
			<div class="nc-collapse">
				<header><span></span>
					小龙女</header>
				<article>小龙女,是金庸小说《神雕侠侣》的女主角,金庸笔下广受读者喜爱的女角之一。容貌秀美若仙、清丽绝俗。性格宽容恬淡、天真可爱。武功轻灵飘逸,于婀娜妩媚中击敌制胜。</article>
			</div>
			<div class="nc-collapse">
				<header><span></span>
					黄药师</header>
				<article>黄药师,外号“东邪”,天下“五绝”之一,是金庸武侠小说《射雕英雄传》和《神雕侠侣》中的角色。是黄蓉之父,对其妻冯氏(小字阿衡)一往情深。。  </article>
			</div>
		</div>

		<h3>2.chicun</h3>
		<div class="nc-collapseset" id="collapset3">
			<div class="nc-collapse">
				<header><span></span>
					杨过</header>
				<article>杨过,名过,字改之,是金庸武侠小说《神雕侠侣》[1]  中的主人公,前作《射雕英雄传》中杨康与穆念慈之子,西毒欧阳锋的义子。名字为郭靖、黄蓉所取,取“有过则改之”之意。</article>
			</div>
			<div class="nc-collapse">
				<header><span></span>
					小龙女</header>
				<article>小龙女,是金庸小说《神雕侠侣》的女主角,金庸笔下广受读者喜爱的女角之一。容貌秀美若仙、清丽绝俗。性格宽容恬淡、天真可爱。武功轻灵飘逸,于婀娜妩媚中击敌制胜。</article>
			</div>
			<div class="nc-collapse">
				<header><span></span>
					黄药师</header>
				<article>黄药师,外号“东邪”,天下“五绝”之一,是金庸武侠小说《射雕英雄传》和《神雕侠侣》中的角色。是黄蓉之父,对其妻冯氏(小字阿衡)一往情深。。  </article>
			</div>
		</div>
.nc-collapseset {
  width:60%;
  min-width:200px;
  min-height:100px;
  display: flex;
  flex-direction:column;
}

.nc-collapseset .nc-collapse {
  margin-bottom:5px;
}

.nc-collapseset .nc-collapse header {
  border:solid 1px #999;
  width:100%;
  height:40px;
  line-height:40px;
  padding-left:15px;
  background:#e6e6e6;
  box-sizing:border-box;
  cursor:pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  color:#666;
}
.nc-collapseset .nc-collapse.active header {
  border-bottom:none;
  border-radius: 4px 4px 0 0;
  color:#1a1a1a;
}
.nc-collapseset .nc-collapse header span  {
  border:solid 3px #999;
  border-top:none;
  border-left:none;
  margin-right:15px;
  display:inline-block;
  height:8px;
  width:8px;
  transform: rotate(-45deg);
  transition: transform 0.2s;
}
.nc-collapseset .nc-collapse.active header span  {
  border-color:#1a1a1a;
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.nc-collapseset .nc-collapse article {
  width:100%;
  border:solid 1px #999;
  border-top:none;
  box-sizing:border-box;
  padding:10px;
  display: none;
  border-radius: 0 0 4px 4px;
  max-height: 0px;
  opacity:1;
	max-height:1000px;
}
.nc-collapseset .nc-collapse.active {
    box-shadow: 0px 0px 2px;
  	border-radius: 4px;
}
.nc-collapseset .nc-collapse.disable header {
  color:#1a1a1a;
  opacity: 0.5;
  cursor: not-allowed;