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 sinc...



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

  1. This is extremely helpful info!! Very good work. Everything is very interesting to learn and easy to understand. Thank you for giving information. Tom Hardy Long Coat

    ReplyDelete
  2. Thank you again for all the knowledge you distribute,Good post. I was very interested in the article, it's quite inspiring I should admit. I like visiting you site since I always come across interesting articles like this one.Great Job, I greatly appreciate that.Do Keep sharing! Regards 먹튀검증

    ReplyDelete
  3. Developing your objectives in this means enables you to plainly describe your demands to the web design denver colorado that you select. And also, the details you collect from these concerns can aid in selecting the appropriate internet growth firm.

    ReplyDelete
  4. Amazing! It’s a unique idea. The layout of the timeline plays a vital role in grabbing the audience. Last year I was looking for a reliable source where I can get dissertation help. I found a website, named Dissertation Proposal, and its impressive timeline caught my eye. What a compelling layout it was. Then I took their services and get done with my task. Just mean to say that the timeline design matters a lot for the success of any online platform.

    ReplyDelete
  5. Need to Take Your Class Online Now? Take Your Class Online offers best online class help! Just say take my online class for me. We offer do my online class help!

    ReplyDelete
  6. Searching for Take My Classes Online For Me or do my online class? Get the best online class help from Online Classes Hub. We take your classes and courses.

    ReplyDelete
  7. Need take my online class services? Reach out to Online Class Help Now. We have the best online class takers to help your Do My Class For Me needs.

    ReplyDelete
  8. I think your blog will easily get the correct market because it's having the piece of content. so it can easily attract visitors.
    If you are looking to buy customised eco friendly plantable seed pencil. Get connected with us for more details.

    ReplyDelete
  9. Nice blog! Great work. Keep it up.
    Click here for iphone 6 plus price

    ReplyDelete
  10. We have got you a solution! You can come to our essay writing service at any time for your help with the philosophy essay topic ideas at once. All your troubles will find their way regarding the topic selection. Also, you can trust sensitive tasks that might affect your academic performance. We can assure you one thing, due to us, you won't face any negative feedback, but you might indeed be able to witness a positive impact on your grades with our exceptional philosophy essay writing service. Though writing and selecting a philosophy essay is a task job to do since you have us all, your work would become more manageable.

    ReplyDelete

emo-but-icon

SUBSCRIBE


item