Simple Tabs

Simple Tabs

  $('#tabs a').click(function() {
  // Add prevent default
    $('#tabs li').removeClass('active');
    $(this).parent().addClass('active');

    var tab_to_show = $(this).attr('href');
    $("#tabs_container").children().addClass('hidden');
    $(tab_to_show).removeClass('hidden');

  });
  
  ##### Markup
  
   %ul#tabs
          %li.active
            %a{href: "#tabs-1"} Tue 4/22
          %li
            %a{href: "#tabs-2"} Wed 4/23
          %li
            %a{href: "#tabs-3"} Thu 4/24
          %li
            %a{href: "#tabs-4"} Fri 4/25
      #tabs_container
        #tabs-1
          = render "shared/schedule/day_one"
        #tabs-2.hidden
          = render "shared/schedule/day_two"
        #tabs-3.hidden
          = render "shared/schedule/day_three"
        #tabs-4.hidden
          = render "shared/schedule/day_four"
          
  
  #### Style
  
  .hidden {
    display: none !important;
    visibility: hidden;
}
 li {
  float: left;
      display: block;
      
  a {
        color: white;
        font-weight: 100;
      }
      &.active {
        background-color: white;
      a {
        color: $mid_orange;
        }
    }