Responsive Timeline with Bootstrap Collapse



In this article, I am going to explain how to create a responsive timeline design with collapse using Twitter Bootstrap. Ever since facebook introduced it, designers have been coming up with various forms of timeline designs to depict a story or history of events on a webpage. So, I thought I could make use of Twitter Bootstrap to quickly write a timeline along with bootstrap's collapse component.


Libraries Used

-- jQuery
-- Twitter Bootstrap
-- Animate.css (Optional)

index.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" href="css/app.css" />
<!-- Modernizr JS for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 8]>
    <script src="assets/plugins/modernizr.min.js"></script>
    <![endif]-->
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body>
 <div class="container section-wrapper">
     <div class="section-content">                           
         <!-- EXPERIENCE START -->
         <div class="row">
              <div class="col-md-10 col-md-offset-1">
                   <h3 class="text-center text-yellow">
                          MY WORK EXPERIENCE
                   </h3>
               <div class="panel-group timeline" id="experience">
                    <div class="timeline-item">
                       <div class="timeline-year">
                            <span class="timeline-year">2014 - Now</span>
                       </div>
                       <!-- //.timeline-year -->
                       <div class="timeline-btn">
                           <a href="#exp1" data-toggle="collapse" data-parent="#experience"></a>
                       </div>
                       <!-- //.timeline-btn -->
                       <div class="panel">
                            <div class="panel-heading">
                                 <div class="panel-title">
                                     <h4>Endeca Developer - Comp Name - Location</h4>
                                  </div>
                                  <!-- //.panel-title -->
                             </div>
                             <!-- //.panel-heading -->
                             <div id="exp1" class="panel-collapse collapse in">
                                 <div class="panel-body">
                                     <p>
                                         Responsibilities:
                                         <br>
                                         Your roles and responsibilities goes here                                              </p>
                                 </div>
                                 <!-- //.panel-body -->
                             </div>
                             <!-- //.panel-collapse -->
                       </div>
                       <!-- //.panel -->
                  </div>
                  <!-- //.timeline-item -->
                  <div class="timeline-item animated bounceInUp">
                         <div class="timeline-year">
                             <span class="timeline-year">2013 - 2014</span>
                         </div>
                         <!-- //.timeline-year -->
                         <div class="timeline-btn">
                             <a href="#exp2" class="collapsed" data-toggle="collapse" data-parent="#experience"></a>
                         </div>
                         <!-- //.timeline-btn -->
                         <div class="panel">
                             <div class="panel-heading">
                                  <div class="panel-title">
                                       <h4>Associate - Comp Name</h4>
                                   </div>
                                   <!-- //.panel-title -->
                             </div>
                             <!-- //.panel-heading -->
                             <div id="exp2" class="panel-collapse collapse">
                                 <div class="panel-body">
                                    <p>
                                       Technologies Worked On:
                                       <br>                                          
                                       Your roles and responsibilities goes here
                                   </p>
                                  </div>
                                 <!-- //.panel-body -->
                             </div>
                             <!-- //.panel-collapse -->
                          </div>
                          <!-- //.panel -->
                  </div>
                  <!-- //.timeline-item -->
                  <div class="timeline-item animated bounceInUp">
                      <div class="timeline-year">
                          <span class="timeline-year">2011 - 2013</span>
                      </div>
                      <!-- //.timeline-year -->
                      <div class="timeline-btn">
                          <a href="#exp3" class="collapsed" data-toggle="collapse" data-parent="#experience"></a>
                      </div>
                      <!-- //.timeline-btn -->
                      <div class="panel">
                          <div class="panel-heading">
                               <div class="panel-title">
                                   <h4>Programmer Analyst - Comp Name</h4>
                               </div>
                               <!-- //.panel-title -->
                          </div>
                          <!-- //.panel-heading -->
                          <div id="exp3" class="panel-collapse collapse">
                              <div class="panel-body">
                                   <p>
                                     Technologies Worked On:
                                     <br>                                               
                                     Your roles and responsibilities goes here
                                   </p>
                              </div>
                              <!-- //.panel-body -->
                          </div>
                          <!-- //.panel-collapse -->
                     </div>
                     <!-- //.panel -->
               </div>
               <!-- //.timeline-item -->
               <div class="timeline-item animated bounceInUp">
                    <div class="timeline-year">
                         <span class="timeline-year">2010 - 2011</span>
                     </div>
                     <!-- //.timeline-year -->
                     <div class="timeline-btn">
                         <a href="#exp4" class="collapsed" data-toggle="collapse" data-parent="#experience"></a>
                     </div>
                     <!-- //.timeline-btn -->
                     <div class="panel">
                          <div class="panel-heading">
                               <div class="panel-title">
                                   <h4>Programmer Analyst Trainee - Comp Name</h4>
                                </div>
                                <!-- //.panel-title -->
                           </div>
                           <!-- //.panel-heading -->
                           <div id="exp4" class="panel-collapse collapse">
                                <div class="panel-body">
                                     <p>
                                       Responsibilities:
                                        <br>
                                        Your roles and responsibilities goes here
                                     </p>
                                 </div>
                                 <!-- //.panel-body -->
                            </div>
                            <!-- //.panel-collapse -->
                      </div>
                      <!-- //.panel -->
                </div>
                <!-- //.timeline-item -->
            </div>
            <!-- //.panel-group -->
        </div>
        <!-- //.col-md-10 -->
      </div>
      <!-- //EXPERIENCE END -->
  </div>
  <!-- //.section-content -->
</div>
</body>
</html>

app.css

/*---------------------------------------------------------------------*/
/*  COMMON
/*---------------------------------------------------------------------*/

body {
    background-color: #288479;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    color: #2B2626;
    line-height: 25px;
    overflow-x: hidden;
}
.section .section-wrapper > .section-content {
    padding: 80px 0px;
}

@media (min-width: 768px) {
  .section .section-wrapper > .section-content {
    padding: 100px 0px;
  }
}
.text-center{
  text-align:center;
}
.text-yellow{
  color:#F1EA0E;
}
.text-white{
  color:#fff;
}

/*---------------------------------------------------------------------*/
/*  TIMELINE
/*---------------------------------------------------------------------*/

.panel-group.timeline {
  position: relative;
  margin-top: 30px;
}

.panel-group.timeline .timeline-item {
  position: relative;
  margin-bottom: 40px;
}

@media (min-width: 568px) {
  .panel-group.timeline .timeline-item {
    margin-bottom: 20px;
  }
}

@media (min-width: 768px) {
  .panel-group.timeline .timeline-item:before {
    position: absolute;
    content: '';
    width: 1px;
    height: calc(100% + 20px);
    top: 0;
    left: 170px;
    border-left: 1px dashed #fff;
  }
}

.panel-group.timeline .timeline-item:last-child {
  margin-bottom: 0px;
}

.panel-group.timeline .timeline-item:last-child:before {
  display: none;
}

.panel-group.timeline .timeline-item .timeline-year {
  display: block;
  position: relative;
  width: 120px;
  height: 40px;
  margin-bottom: -20px;
  margin-right: auto;
  margin-left: auto;
  line-height: 40px;
  background-color: #DCC417;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 4px;
}

@media (min-width: 568px) {
  .panel-group.timeline .timeline-item .timeline-year {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
  }
}

.panel-group.timeline .timeline-item .timeline-btn {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 150px;
  width: 40px;
  height: 40px;
  background-color: #C70E32;
  border-radius: 4px;
}

@media (max-width: 767px) {
  .panel-group.timeline .timeline-item .timeline-btn {
    display: none;
  }
}

.panel-group.timeline .timeline-item .timeline-btn > a {
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
}

.panel-group.timeline .timeline-item .timeline-btn > a:before {
  display: block;
  position: absolute;
  z-index: 15;
  content: '-';
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  line-height: 38px;
  color: #ffffff;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
}

.panel-group.timeline .timeline-item .timeline-btn > a.collapsed:before {
  content: '+';
}

.panel-group.timeline .timeline-item .panel {
  padding: 10px;
  width: 100%;
  background: transparent;
  border: 1px solid #DCCECE;
  border-radius: 0px;
}

@media (min-width: 568px) {
  .panel-group.timeline .timeline-item .panel {
    width: calc(100% - 140px);
    margin-left: 140px;
  }
}

@media (min-width: 768px) {
  .panel-group.timeline .timeline-item .panel {
    width: calc(100% - 210px);
    margin-left: 210px;
  }
}

.panel-group.timeline .timeline-item .panel .panel-heading {
  position: relative;
}

.panel-group.timeline .timeline-item .panel .panel-heading .panel-title {
  text-transform: uppercase;
  color:#11ECD2;
}

@media (max-width: 567px) {
  .panel-group.timeline .timeline-item .panel .panel-heading .panel-title {
    padding-top: 20px;
  }
}

.panel-group.timeline .timeline-item .panel .panel-collapse .panel-body {
  padding-top: 5px;
  border-top: none;
  color:#DCCECE;
}

.panel-group.timeline .timeline-item .panel .panel-collapse .panel-body p {
  margin-bottom: 0px;
}

app.js

var collapseTimeline = function (){
        var screensize = Math.max($(window).width(), window.innerWidth),
        expItem = $('.collapse:not(:first)', '#experience');       
        if (screensize < 768){
            expItem.collapse('show');
           
        }
        else{
            expItem.collapse('hide');          
        }
    };
    
    // Call collapseTimeline() when window is loaded.
    $(window).load(function(){
        collapseTimeline();
    });
    
    // Call collapseTimeline() when window is resized.
    $(window).resize(function(){
        collapseTimeline();
    });

    //Animations     
      $('#experience').find('.timeline-item:not(:first)').each(function(i){            
          var element = $(this),
          itemsDelay   = ( isNaN($(this).data('animation-delay')) ? 50 : $(this).data('animation-delay'));
          element.css('opacity', 0).one('inview', function(isInView) {
              if (isInView){
                  setTimeout(function(){
                      element.addClass('animated bounceInUp').css('opacity', 1);
                  } , itemsDelay * (i * 2));
              }
          });
      });



How it works

Before we get into how it works, please have a look at Bootstrap collapse plugin here and understand how it works. 

1. CSS3 Media queries are used to adjust the style according to the device size. The meta tag (name=viewport) detects the device width.

2.  To set the collapsible element to be open by default use the in class (example :index.html - line 47). In this example the first section of the collapse/timeline is made to be open on load. To set the collapsible element to be closed, use class="collapsed" on the timeline-button. (example :index.html - line :65)

3. The jquery code in app.js opens all the collapsible sections if the screen size is below 768px, in case of mobile or a tablet.

4. I have also added some animation using Animate.css by Daniel Eden. This is totally optional.

How it looks on different screen size


Keep yourself subscribed for getting programmingfree articles delivered directly to your inbox once in a month. Thanks for reading!



Subscribe to GET LATEST ARTICLES!


Related

Web Design 7205940497054304006

Post a Comment

emo-but-icon

SUBSCRIBE


item