JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.3/jquery.slimscroll.js  "></script>
<ul id='timeline'>
  <li class='work'>
    <input class='radio' id='work5' name='works' type='radio'checked="checked">
    
    <div class="relative"> 
         <span class='circle'></span>
       <div class="panel-heading collapsed active" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                  <h4 class="panel-title">
                  <span class="carrer-counselling"> MONDAY(7 Trips)</span>
                  <a class="pull-right"href="#" onClick="javascript:changeBGC('#000099')">
                   <div class="panel-arrow"></div>
                  </a>

                   <div clear="clear-fix"></div>
                </h4>
              </div>
   
    </div>
     <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                <ul>
                    <li id="popoverId"><p>1. Indiranagar To Jayanagar</p>
                         <p>10/01/2015  |  8:30 am</p>
                    </li>
                    <li>
                        <p>2. Indiranagar To Jayanagar</p>
                         <p>10/01/2015  |  8:30 am</p>
                    </li>
                    <li>
                        <p>3. Indiranagar To Jayanagar</p>
                         <p>10/01/2015  |  8:30 am</p>
                    </li>
                 </ul>
                 <div id="popoverContent" class="hide">
                     <div class="col-md-12">
                         <div class="">10.01.2015<span class="pull-right">8.30am</span></div>
                         
                     </div>
                 </div>
              </div>
            </div>
  </li>
</ul>

CSS

#timeline {
  list-style: none;
  width:300px;
  margin:0 auto;
  padding-left:0;
  border-left: 4px solid #cccccc;
  margin-top:50px;
}
#timeline li {
  position: relative;
  margin-left:15px;

}
.panel-heading{ padding:0;   border:1px solid #f6f6f6; background:;}

.panel-title{
   background:#fbfbfb;
    color:black;
    padding:10px;
}

.panel-collapse{
    padding: 0;
    background: #fbfbfb;
}
.panel-body{padding:0px;}
.panel-body ul {padding:0;}
.panel-body ul li{
    list-style:none;
    margin:0!important;
    border-bottom:1px solid #ebebeb;
    padding:10px;
    cursor:pointer;
}
.panel-body ul li:hover{background:#fbeaea;}
.panel-body ul li p{margin:0; font-size:14px;}
.circle {
  margin-top: -10px;
  top: 50%;
  left:-24px;
  width: 15px;
  height: 15px;
  background: #cccccc;
   border: 3px solid #fff;

  border-radius: 50%;
  display: block;
  position: absolute;
}

.content {
  max-height: 20px;
  padding: 50px 20px 0;
  border-color: transparent;
  border-style: solid;
  border-radius: 0.5em;
  position: relative;
}
.content:before, .content:after {
  content: "";
  width: 0;
  height: 0;
  border: solid transparent;
  position: absolute;
  pointer-events: none;
  right: 100%;
}

.content p {
  max-height: 0;
  color: transparent;
  text-align: justify;
  word-break: break-word;
  hyphens: auto;
  overflow: hidden;
}

label {
  font-size: 1.3em;
  position: absolute;
  z-index: 100;
  cursor: pointer;
  top: 20px;
  transition: transform 0.2s linear;
}

.radio {
  display: none;
}

.radio:checked + .relative label {
  cursor: auto;
  transform: translateX(42px);
}
.radio:checked + .relative .circle {
  background: #f98262;
}
.radio:checked ~ .content {
  max-height: 180px;
  border-color: #eee9dc;
  margin-right: 20px;
  transform: translateX(20px);
  transition: max-height 0.4s linear, border-color 0.5s linear, transform 0.2s linear;
}
.radio:checked ~ .content p {
  max-height: 200px;
  color: #eee9dc;
  transition: color 0.3s linear 0.3s;
}

JavaScript

$('#popoverId').popover({
    html: true,
    content: function () {
        return $('#popoverContent').html();
    }
});


var isVisible = false;
var clickedAway = false;

$('.popoverThis').popover({
    html: true,
    trigger: 'manual'
}).click(function (e) {
    $(this).popover('show');
    $('.popover-content').append('<a class="close" style="position: absolute; top: 0; right: 6px;">&times;</a>');
    clickedAway = false
    isVisible = true
    e.preventDefault()
});


$(document).click(function (e) {
    if (isVisible & clickedAway) {
        $('.popoverThis').popover('hide')
        isVisible = clickedAway = false
    } else {
        clickedAway = true
    }
    
});