Responsive: tabs to accordion

In this example below you will see how to do a Responsive: tabs to accordion with some HTML / CSS and Javascript

Using Tab-2_accordion plugin. link : https://github.com/techhysahil/Tab-2-accordian.More demo can b view @ http://ui.techhysahil.com/Tab-2-accordion/

Thumbnail
This awesome code was written by techhysahil, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright techhysahil ©
  • HTML
  • CSS
  • JavaScript
    <div class="demo-container">
  <h2 class="title"> Responsive Tab to Accordion</h2>
  <a href="https://github.com/techhysahil/Tab-2-accordian" target="_blank" class="git-repo">Github Repo<a/>
  <div class="tab_accord_wrapper flat_theme">
      <ul class="tabs">
          <li class="active" rel="tab1">First Tab</li>
          <li rel="tab2">Second Tab</li>
          <li rel="tab3">Third Tab</li>
      </ul>

      <div class="tab_container">
          <div class="tab_drawer_heading_wrapper">
              <h3 class="d_active tab_drawer_heading" rel="tab1">First Tab
                  <i class="fa fa-plus"></i>
              </h3>
          </div>
          <div id="tab1" class="tab_content">
            <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec mauris velit. Proin elementum gravida enim ac finibus. Praesent ut imperdiet augue. Vestibulum nulla nibh, auctor ut pharetra ornare, lacinia ut dui. Mauris luctus semper justo quis vestibulum. Vivamus dictum pellentesque felis, ac congue est feugiat at. Aliquam dignissim feugiat ligula sit amet facilisis. Aliquam eu ipsum ac velit semper ultricies id a leo. In commodo purus nunc, vitae maximus purus sagittis in. Quisque velit nibh, consectetur id efficitur quis, facilisis sed metus. Sed non mi in nunc suscipit facilisis sed et lacus. Proin et gravida massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec volutpat tellus ut quam blandit, vulputate pellentesque sem scelerisque.
              </p>
          </div>

          <div class="tab_drawer_heading_wrapper">
              <h3 class="tab_drawer_heading" rel="tab2">Second Tab
                  <i class="fa fa-plus"></i>
              </h3>
          </div>
          <div id="tab2" class="tab_content">
            <p>Vivamus semper viverra tempus. Sed pellentesque nibh eros, ut volutpat augue vulputate eget. Fusce ac lacus tristique ante pulvinar viverra quis vitae ex. Mauris finibus est vitae mi viverra facilisis. Duis sit amet pharetra enim, eget mattis mauris. Curabitur semper eros ligula, cursus porttitor nulla suscipit at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc commodo eu purus sit amet lacinia. Curabitur vitae nibh nec arcu tincidunt placerat id vitae tortor. Duis condimentum sapien lacus. Aenean imperdiet ex id massa consequat posuere. Morbi volutpat sapien at porta pharetra. Integer posuere augue lorem, sed ultricies enim malesuada id. Suspendisse rhoncus sapien elit.</p>
          </div>

          <div class="tab_drawer_heading_wrapper">
              <h3 class="tab_drawer_heading" rel="tab3">Third Tab
                  <i class="fa fa-plus"></i>
              </h3>
          </div>
          <div id="tab3" class="tab_content">
              <p>
                  Phasellus posuere hendrerit ante et convallis. Vivamus sollicitudin pharetra enim, eget posuere quam molestie ut. In sed urna at nisi ullamcorper rutrum eget ut felis. Morbi et lorem mauris. In hac habitasse platea dictumst. Suspendisse vitae lorem vehicula, sollicitudin velit at, ornare dui. Proin lacinia consectetur purus quis finibus. Aliquam quis eros ut risus convallis dictum vitae a purus. Donec eget quam lacus. Sed et laoreet purus. Morbi pretium eros eget nunc ultricies iaculis. Quisque auctor, quam vitae vehicula feugiat, eros leo sollicitudin quam, non consequat purus nulla eget dui. Suspendisse blandit urna nunc, a euismod tellus pretium non. Phasellus blandit lectus non nulla eleifend, ultrices sollicitudin risus rhoncus. Morbi rutrum ornare neque nec ornare.
              </p>
          </div>
      </div>
  </div>
</div>  


/*Downloaded from https://www.codeseek.co/techhysahil/responsive-tabs-to-accordion-vNwrNr */
    .demo-container{
  display:block;
  width:70%;
  margin: 0 auto;
  margin-top:100px;
  position:relative;
}
.title{
  color:#999;
  text-align:center;
  margin-bottom:50px;
}
.git-repo{
  position:absolute;
  right:0px;
  top:0px;
}
/****************************
 Project : Tab-2-Accodion
 Author : Sahil Gupta
 File : style.scss
****************************/

.tab_accord_wrapper.flat_theme{
  ul.tabs{
    border-top: 1px solid #e2e2e2;
    border-left: 1px solid #e2e2e2;
    border-right: 1px solid #e2e2e2;
  }
  ul.tabs li{
    color: #000000;
    border-right: 1px solid #e2e2e2;
  }
  ul.tabs li.active {
    background-color: #fff;
    color: #fff;
    border-bottom: 2px solid #fff;
    background: #eb5240;
  }
  .tab_container{
    background: #fff;
    border: 1px solid #e2e2e2;
  }
  .tabs_action{
    border-top: 1px solid #e2e2e2;
  }
  @media screen and (max-width: 768px) {
    .tab_drawer_heading {
      color: #ffffff;
      background-color: #ff6873;

    }
  }
}


/*********************************
Author : Techhysahil
Link : http://techhysahil.com
*********************************/


/* Assign min-width to container */
.select2-container{
  min-width:200px;
}

.select2-container .select2-choice {
  border: 2px solid #dce4ec;
  height: 36px;
  border-radius: 0px ;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  text-indent: 1px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background-image: none;
}
.select2-container.select2-drop-above .select2-choice {
  border-bottom-color: #dce4ec;
  border-radius:0px;
}
.select2-container input:focus,.select2-container .selection:focus{
  outline:0px;
}
.select2-drop {
  margin-top: -2px;
  border: 2px solid #dce4ec;
  border-top: 0;
  border-radius: 0px !important;
  -webkit-border-radius:0 0 6px 6px;
  -moz-border-radius:0 0 6px 6px;
  border-radius:0 0 6px 6px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.select2-drop.select2-drop-above {
  margin-top: 2px;
  border-top: 2px solid #dce4ec;
  border-bottom: 0;
  -webkit-border-radius: 6px 6px 0 0;
  -moz-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.select2-container .select2-choice div {
  border-left: 2px solid #dce4ec;
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;

  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
.select2-search{
  margin-top: 3px;
}
.select2-search input {
  height: 30px !important;
  border: 2px solid #dce4ec;
}
.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
  border: 2px solid #dce4ec;
  outline: none;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.select2-dropdown-open .select2-choice {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;

  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius-bottomleft: 0;
  border-bottom-left-radius: 0;

  -webkit-border-bottom-right-radius: 0;
  -moz-border-radius-bottomright: 0;
  border-bottom-right-radius: 0;
}
.select2-dropdown-open .select2-choice div {
  background: transparent;
  border-left: none;
  filter: none;
}
.select2-results .select2-highlighted {
  background: #1abc9c;
  color: #fff;
  border-radius: 0px;
}
.select2-results{
  padding: 0 0 0 0px;
  margin: 4px 0px 0px 0;
}
.select2-container-multi .select2-choices {
  height: auto !important;
  height: 1%;

  border: 2px solid #dce4ec;
}
.select2-container-multi.select2-container-active .select2-choices {
  border: 2px solid #dce4ec;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.select2-container .select2-choice .select2-arrow{
  border: 0px;
  border-radius: 0px;
  background: transparent;
  background-image: none;
}

//Tab Accordian Wrapper Style
body{
  margin: 0px;
  padding: 0px;
}
.tab_accord_wrapper{
    display: block;
    width: 100%;
    overflow: auto;
    box-sizing: border-box;
  ul.tabs {
      width: auto;
      padding: 0px;
      margin: 0px;
      float: left;
      list-style: none;
      height: 32px;
  }
  ul.tabs li {
      float: left;
      margin: 0px;
      cursor: pointer;
      padding-left: 21px;
      padding-right: 21px;
      height: 31px;
      line-height: 31px;
      font-weight: 500;
      overflow: hidden;
      position: relative;
  }
  ul.tabs li.active {
      display: block;
  }
  .tab_container {
      border-top: none;
      width: 100%;
      clear: both;
      float: left;
      overflow: auto;
      margin-bottom: 10px;
      box-sizing: border-box;
  }
  .tabs_action{
      text-align: right;
      position: relative;
      clear: both;
      padding-top: 17px;
      padding-right: 20px;
  button{
      border-radius: 0px;
      >.fa{
           padding-left: 10px;
       }
  }
  }

  .tab_content {
      padding: 10px;
      display: none;
      transition: all 0.25s ease-in-out;
      animation: flipdown 0.8s ease both;
      &:nth-of-type(n) {
           animation-delay: 0.1s;
       }
  }
  p.venue_desc{
      line-height: 25px;
      padding: 0 0 10px 0;
      text-align: justify;
  }
  .venue_desc_more{
      margin-top: -15px;
      display: block;
      margin-bottom: 20px;
  }
  .tab_drawer_heading {
      display: none;
  }

  @media screen and (max-width: 768px) {
      .tabs {
          display: none;
      }
      .tab_container{
        padding: 0px;
        width: 100%;
      }
      .tab_drawer_heading {
          animation: flipdown 0.5s ease both;
          padding: 10px 10px;
          font-size: 20px;
          margin: 0px;
          display: block;
          cursor: pointer;
          -webkit-touch-callout: none;
          -webkit-user-select: none;
          -khtml-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;

        &:nth-of-type(1) {
             animation-delay: 0.5s;
         }
        &:nth-of-type(2) {
             animation-delay: 0.75s;
         }
        &:nth-of-type(3) {
             animation-delay: 1s;
         }
        .fa{
            float: right;
            font-size: 18px;
        }
      }
  }
}


/*Downloaded from https://www.codeseek.co/techhysahil/responsive-tabs-to-accordion-vNwrNr */
    /*!
 * Tabs-2-Accordion JS
 * Original author: http://techhysahil.com/
 * Further changes, comments: @Techhysahil
 * Licensed under the MIT license
 */


// the semi-colon before the function invocation is a safety
// net against concatenated scripts and/or other plugins
// that are not closed properly.

;(function(){
  
    $.fn.tab2accordion = function(options) {

        // Establish our default settings
        var settings = $.extend({
            activeTab : 0
        }, options);

        return this.each( function() {


            //If Tab Mode
            $(".tab_content").hide();
            console.log(settings.activeTab);
            $(".tab_content:eq(" + settings.activeTab + ")").show();

            //If Tab mode
            $("ul.tabs li").click(function() {

                $(".tab_content").hide();
                var activeTab = $(this).attr("rel");
                $("#"+activeTab).fadeIn();

                $("ul.tabs li").removeClass("active");
                $(this).addClass("active");

                $(".tab_drawer_heading").removeClass("d_active");
                $(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active");

            });


            //If Accordion Mode
            $(".tab_drawer_heading").click(function() {

                var d_activeTab = $(this).attr("rel");


                if($(this).hasClass("d_active")){
                    $("#"+d_activeTab).fadeOut();
                    $(this).removeClass("d_active");
                }
                else{
                    $("#"+d_activeTab).fadeIn();
                    $(this).addClass("d_active");
                }

                $("ul.tabs li").removeClass("active");
                $("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active");
            });
            //New changes End

            /* Extra class "tab_last" to add border to right side of last tab */
            $('ul.tabs li').last().addClass("tab_last");

        });
    }
        $(".tab_accord_wrapper").tab2accordion();
})();



Comments