JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<div id="module_judging">
    <div class="judging_content">
        <!-- Start  Module Exp -->
        <div class="exp_item judging_mod">
            <div class="exp_show">
                <div class="exp_show_date inline">1</div>
                <div class="exp_show_name inline">Dealership Qualification Round</div>
                <div class="exp_show_icon inline exp_plus"></div>
            </div>
            <div class="exp_hide judging_hide">
                <div class="judging_item">
                    <div class="judging_item_text inline">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel purus quam. Pellentesque auctor, risus ornare posuere tristique.
                    </div>
                    
                    <div class="judging_item_score inline">
                        <div class="score_container">
                            <div class="score">
                                <span>Score</span>
                                <div class="score_rate">
                                    <div>0</div>
                                    <div>1</div>
                                    <div>2</div>
                                    <div>3</div>
                                    <div>4</div>
                                    <div>5</div>
                                </div>
                            </div><div class="score_drop score_plus"></div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                
                <div class="judging_item">
                    <div class="judging_item_text inline">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel purus quam. Pellentesque auctor, risus ornare posuere tristique.
                    </div>
                    
                    <div class="judging_item_score inline">
                        <div...

SCSS

*{margin:0;padding:0;box-sizing:border-box;}
.clearfix {
	clear:both;
}
.inline {
	display: inline-block;
}
.exp_item {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}
.exp_show {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	border-radius: 5px;
	margin-bottom: 2px;
	font-size: 18px;
	cursor:pointer;
	background-color: #0075c0;
	color: #fff;
	border-radius: 10px;
    overflow: hidden;
	transition:all .2s linear;
	&:hover {
		background-color: rgba(0, 117, 192, 0.8);
	}
}
.exp_show_active {
	background-color: rgba(0, 117, 192, 0.8);
}
.exp_show_date {
	position: relative;
	padding: 25px 30px;
	background-color: #004978;
	border-bottom-left-radius: 10px;
	border-top-left-radius: 10px;
}
.exp_show_date:after {
	content: '';
	position: absolute;
	width: 27px;
	height: 73px;
	right: -10px;
	top: 10%;
	background-color: #000;
	background: url(http://s29.postimg.org/e46mwcwg3/left_arrow.png) no-repeat;
}
.exp_show_name {
	padding-left: 20px;
	width: 43%;
	white-space: nowrap;
}
.exp_hide {
	display: none;
	text-align: center;
	padding: 10px 20px;
	color: #8a8987;
	font-size: 1.5vw;
}
.exp_show_icon {
	border-left: 2px solid #fff;
	padding: 38px;
	float: right;
}
.exp_minus {
    background: url(http://s27.postimg.org/r11kdi38f/minus.gif) no-repeat;
    background-position: center;
    background-size: 50% 50%;
}
.exp_plus {
    background: url(http://s8.postimg.org/ctjou8l7l/plus.gif) no-repeat;
    background-position: center;
    background-size: 50% 50%;
}
#module_judging {
	display: block;
	max-width: 1280px;
	height: auto;
	margin: 0 auto;
	background-color: #fff;
	padding: 60px 0px;
}
.judging_content {
	display: block;
	width: 100%;
	height: auto;
	padding: 0px 25px;
}
.judging_hide {
	display: none;
	width: 100%;
	height: auto;
	background-color: rgba(0, 117, 192, 1);
	padding: 18px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
.judging_mod {
	.exp_show_active {
		background-color: rgba(0, 117,...

JavaScript

function expandable() {
		$('.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.slideToggle(speed);
		$('.exp_item > .exp_hide').not($this)
		.slideUp(speed)
		.parent().find('.exp_show').removeClass('exp_show_active');
		$(this).find('.exp_show_icon').toggleClass('exp_plus');
		$(this).find('.exp_show_icon').toggleClass('exp_minus');
	});
}

function dropdownButton() {

	$('.score_drop').click(function() {
	
		$(this).parent().find('.score .score_rate').slideToggle(400, function(){

			$(this).parent().parent().find('.score_drop').toggleClass('score_minus');
			$(this).parent().parent().find('.score_drop').toggleClass('score_plus');
		});
		return false;
	});

	$('html').click(function() {
		if($('div.score_drop').hasClass('score_minus')){
			$('.score .score_rate').slideToggle(400, function(){
				$('.score_drop').toggleClass('score_minus');
				$('.score_drop').toggleClass('score_plus');
			});
		}
	});
}

function alocateScore(elem){

	var rate = parseInt($(elem).text());
	var oldRate = $(elem).text();

	var oldTotalRate = parseInt($(elem).closest('.exp_item').find('.total_score_result').text());

	if(oldRate > 0){
			oldTotalRate = oldTotalRate - oldRate + rate;
		}else{
			oldTotalRate = oldTotalRate + rate;
		}
	console.log(oldTotalRate);
	$(elem).closest('.exp_item').find('.total_score_result').text(oldTotalRate);

}

$(document).ready(function(){
	expandable();
	dropdownButton();

	$('.score_rate div').on('click', function(e){
		e.preventDefault();
		var rate = $(this).text();
		$(this).parent().parent().find('span').html(rate);

		var elem = $(this);
		alocateScore(elem);
	});
});