

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.



LIVE DEMO DOWNLOAD

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 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.-- jQuery-- Twitter Bootstrap-- Animate.css (Optional) /*---------------------------------------------------------------------*/ /* 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



