jQuery Plugin To Create Sliding Tabbed Panels

A jQuery plugin that provides a simple way to create smooth sliding panels with tabbed navigation just like the tabs interface.

How to use it:

1. Include jQuery library and the jQuery sliding panels plugin at the bottom of your html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/sliding_panels.js"></script>

2. Create navigation tabs and tabbed panels as follow.

<div class="sp">

  <div class="tabs">
    <span class="tab-one">Tab 1</span>
    <span class="tab-two">Tab 2</span>
    <span class="tab-three">Tab 3</span>
  </div>

  <div class="panel_container">
    <div class="panels">
      <div class="panel tab-one">
        <div class="panel_content">
          Conent 1
        </div>
      </div>
      <div class="panel tab-two">
        <div class="panel_content">
          Content 2
        </div>
      </div>
      <div class="panel tab-three">
        <div class="panel_content">
          Content 3
        </div>
      </div>
    </div>
  </div>
  
</div>

3. The basic CSS rules to style the tabs interface.

.sp {
  width: 500px;
  position: relative;
  margin: 0 0 10px 25px;
}

.sp .tabs {
  position: relative;
  z-index: 101; /*Tabs container is first but we want it to display on top of panels container*/
  display: none;
}

.sp .tabs span {
  display: inline-block;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 8px 12px 8px 12px;
  margin: 0px;
  background-color: #1ABC9C;
  cursor: pointer;
  position: relative;
  color:#fff;
}

.sp .tabs span:first-child {
  padding-left: 15px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  -webkit-border-top-left-radius: 12px;
  -moz-border-radius-topleft: 12px;
  border-top-left-radius: 12px;
}

.sp .tabs span:last-child {
  padding-right: 15px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  -webkit-border-top-right-radius: 12px;
  -moz-border-radius-topright: 12px;
  border-top-right-radius: 12px;
}

.sp .tabs span.selected {
  color: #6fe8ff;
  border-bottom: 1px solid #fff;
}

.sp .panel_container {
  position: relative;
  border: 1px solid #ccc;
  border-radius: 0 10px 10px 10px;
  background-color: #fff;
  overflow: hidden;
  z-index: 100;
  margin-top: -1px; /* sets to of panel container 1 pixel below the bottom of the tab*/
}

.sp .panel_container .panel .panel_content { padding: 15px; }

---

This awesome jQuery plugin is developed by droth820. For more Advanced Usages, please check the demo page or visit the official website.