Cacher is the code snippet organizer for pro developers

.accordion
	- for (var j=0;j<10;j++)
		.accordion__el
			.accordion__el-head
				.accordion__el-head-text Заголовок таба
				.accordion__el-head-icon
			.accordion__el-content.text
				p текст для таба

// accordion
.accordion
	+below(640px)
		margin 30px 0
		width calc(100% + 30px)
	margin: 60px 0

.accordion__el
	border 1px solid #e5e5e5
	margin-top: -1px
	cp()
	&:hover
		.accordion__el-head-icon
			&:before
				content ''
				background: $mark
			&:after
				content ''
				background: $mark

.accordion__el-head
	+below(640px)
		padding: 20px
	padding: 30px
	flex(between)
	color black

.accordion__el-head-text
	+below(640px)
		font-weight: 400
		line-height: 1.6
	@extend .type--md
	width: 80%
	font-size: 18px
	font-weight: 700

.accordion__el-head-city
	font-weight: 300
	font-size: 14px
	margin-bottom: 5px

.accordion__el-head-icon
	+below(640px)
		size 16px
	position: relative
	size 28px
	&:before
		content ''
		tr(all)
		height: 2px
		width: 100%
		background: gray
		position: absolute
		top calc(50% - 1px)
	&:after
		content ''
		tr(all)
		height: 100%
		width: 2px
		background: gray
		position: absolute
		left calc(50% - 1px)

.accordion__el-content
	+below(640px)
		padding: 0 30px 30px 30px
	padding: 40px
	display: none
	p
		&:first-child
			margin-top: 0
		&:last-child
			margin-bottom: 0

.accordion__el--active
	border-bottom 1px solid $border-color
	.accordion__el-head-text
		color $green
	.accordion__el-head-icon
		&:after
			content ''
			transform rotate(90deg)
// accordion === end

// accordion row toggle
$('.accordion__el-head').click(function () {
	$(this).toggleClass('accordion__el--active');
	$(this).closest('.accordion__el').find('.accordion__el-content').slideToggle();
});
// accordion row toggle === end