JSFiddle - React, Tailwind, and code Playground

by Carlos Mayorga

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4">
		<div class="panel panel-default">
			<div class="panel-heading">Cursos<div style="padding-right: 10px;" class="pull-right">Creditos</div></div>
			<ul class="list-group">
				<li class="list-group-item curso" data-courseid="1"><div class="ncurso">Matemática I</div><span class="badge">4</span></li>
				<li class="list-group-item curso" data-courseid="2"><div class="ncurso">Matemática Básica</div><span class="badge">4</span></li>
				<li class="list-group-item curso" data-courseid="3"><div class="ncurso">Constitución Desarrollo y Defensa Nacional</div><span class="badge">3</span></li>
				<li class="list-group-item curso" data-courseid="4"><div class="ncurso">Química General</div><span class="badge">5</span></li>
				<li class="list-group-item curso" data-courseid="5"><div class="ncurso">Metódica de la Comunicación</div><span class="badge">3</span></li>
				<li class="list-group-item curso" data-courseid="6"><div class="ncurso">Economía General</div><span class="badge">3</span></li>
			</ul>
		</div>
	</div>
	<div class="col-xs-6 col-sm-6 col-md-4">
		<div class="panel  panel-default">
			<div class="panel-heading">Cursos<div style="padding-right: 10px;" class="pull-right">Creditos</div></div>
			<ul class="list-group">
				<li class="list-group-item curso" data-coursepre="1 2" data-courseid="7"><div class="ncurso">Matemática II</div><span class="badge">4</span></li>
				<li class="list-group-item curso" data-coursepre="1 2" data-courseid="8"><div class="ncurso">Física I</div><span class="badge">4</span></li>
				<li class="list-group-item curso" data-coursepre="2" data-courseid="9"><div class="ncurso">Algoritmos y...

CSS

.ncurso {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	max-width: 90%;
	display: -moz-stack;
}
.curso:hover {
    cursor: pointer;
}

JavaScript

var a,b=[],c=[];
	
	$(".curso").hover(function(){
		a=$(this);b=[];
		var e=a.attr("data-coursepre"),d=a.attr("data-courseid"),e=void 0!=e?e.split(" "):[];
		e.forEach(function(a){
			b.push($("[data-courseid="+a+"]")[0])
		});
		b.push(a);
		b.forEach(function(a){
			$(a).addClass("active")
		});
		c=$("[data-coursepre~="+d+"]");
		c.addClass("list-group-item-success")},function(){
			b.forEach(function(a){$(a).removeClass("active")
		});
		c.removeClass("list-group-item-success")
	});