JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- Start vote-system -->
<div class="exp_box">
    <div class="exp_item">
        <div class="exp_show">
            <div class="expShow_no">1</div>
            <div class="expShow_name">Customer Skills</div>
            <div class="expShow_icon"><i class="fa fa-plus-circle"></i></div>
            <div class="expShow_result">0</div>
            <div class="clearfix"></div>
        </div>
        
        <div class="exp_hide">
            <div class="rate_system">
                <div class="rate_item">
                    <div class="rate_question">
                        Was the sales consultant’s appearance professional?
                    </div>
                    <div class="rate_mark">
                        <div class="btn-group">
                            <div type="button" class="btn btn-default"> 
                                <span class="rate_value">—</span>
                            </div>
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
                                <span class="caret"></span>
                            </button>
                            <div class="dropdown-menu">
                                <div>1</div>
                                <div>2</div>
                                <div>3</div>
                                <div>4</div>
                                <div>5</div>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="rate_item">
                    <div class="rate_question">
                       ...

SCSS

.exp_box {
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	border-radius: 5px;
	border: 1px solid #000;
	background-color: rgba(255,255,255,1);
	margin: 10px 0;
	padding: 20px 10px;
}
.exp_item {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}
.exp_show {
	position: relative;
	display: block;
	background-color: rgba(0,0,0,0.1);
	border: 1px solid #000;
	border-radius: 3px;
	margin: 5px 0;
	font-size: 20px;
	line-height: 20px;
	max-height: 42px;
	overflow: hidden;
	cursor:pointer;
	transition:all .2s linear;
	&:hover:not(.exp_show_progress):not(.exp_show_complete) {
		color: rgba(255,255,255,0.8);
		background-color: rgba(0,0,0,0.5);
		.expShow_no {
			border-right: 1px solid rgba(255,255,255,0.5);
		}
	}
}
.exp_show_active {
	color: rgba(255,255,255,0.8);
	background-color: rgba(0,0,0,0.7);
	.expShow_no {
		border-right: 1px solid rgba(255,255,255,0.5);
	}
}
.exp_show_progress {
	color: rgba(0,0,0,0.8);
	background-color: rgba(240,230,140,1);
	.expShow_no {
		border-right: 1px solid rgba(0,0,0,0.8);
	}
}
.exp_show_complete {
	color: rgba(0,0,0,0.8);
	background-color: rgba(173,255,47,1);
	.expShow_no {
		border-right: 1px solid rgba(0,0,0,0.8);
	}
}
.expShow_no {
	display: block;
	float: left;
	padding: 10px 15px;
	border-right:1px solid #000;
}
.expShow_name {
	display: block;
	float: left;
	padding: 10px 10px;
}
.expShow_icon {
	display: block;
	float: right;
	padding: 10px 10px;
}
.expShow_result {
	display: block;
	position: absolute;
	top: 11px;
	right: 50px;
	width: 50px;
	height: auto;
	background-color: rgba(0,0,0,0.3);
	color: #fff;
	opacity: 0.5;
	border-radius: 5px;
	font-size: 12px;
	text-align: center;
	opacity: 0;
}
.exp_hide {
	display: none;
}

.rate_system {
	display: block;
	width: 100%;
	height: auto;
	padding: 10px;
	background-color:rgba(0,0,0,0.4);
	border-radius:3px;
}
.rate_item {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	border-radius: 5px;
	background-color:...

JavaScript

$(document).ready(function(){
	console.log('jQuery is ready!');
	$('.exp_show').on('click', function(e){
		e.preventDefault();
		e.stopPropagation();

		var $this = $(this).parent().find('.exp_hide'),
			speed = 300;
		$(this).toggleClass('exp_show_active');
		$(this).find('.expShow_icon .fa-plus-circle').toggleClass('fa-minus-circle');
		$this.slideToggle(speed);
		$('.exp_item > .exp_hide').not($this)
			.slideUp(speed)
			.parent().find('.exp_show').removeClass('exp_show_active')
			.find('.expShow_icon .fa-plus-circle').removeClass('fa-minus-circle');

		if(!$(this).hasClass('exp_show_active')){
			var total = 0;
			var rateCount = $this.find('div.btn-default .rate_value');
			$(rateCount).each(function(index, el){
				if($(this).text() != '—'){
					total++;
				}
				
				if(index === rateCount.length - 1){
					if(rateCount.length === total){
						console.log('changeBg - green');
						$this.parent().find('.exp_show').removeClass('exp_show_active').addClass('exp_show_complete');
					} else if(total >= 1){
						console.log('changeBg - yellow');
						$this.parent().find('.exp_show').removeClass('exp_show_active').addClass('exp_show_progress');
					} else {
						console.log('untouched');
					}
				}
			});
		}
	});

	$('.dropdown-menu div').on('click', function(e){
		e.preventDefault();
		var rate = parseInt($(this).text());
		var oldRate = $(this).parent().parent().find('div.btn-default .rate_value').text();
		var oldTotalRate = parseInt($(this).closest('.exp_item').find('.expShow_result').text());
		$(this).parent().parent().find('div.btn-default .rate_value').html(rate);
		if(oldRate > 0){
			oldTotalRate = oldTotalRate - oldRate + rate;
		}else{
			oldTotalRate = oldTotalRate + rate;
		}
		$(this).closest('.exp_item').find('.expShow_result').text(oldTotalRate).css('opacity','1');
		$(this).closest('.exp_hide').find('.rate_total .rate_total_result').text(oldTotalRate);
	});

});