Demo Section Need It

by Anil kolase

HTML

<section class="sh-demo-wrap">
  <div class="tabs-demo-style">
    <nav>
      <ul>
        <li tab="tab1" class="first tab-demo-current"> <a href="#section-shape-1" data-tab="section-shape-2">Design 1</a></li>
        <li tab="tab2"> <a href="#section-shape-2" data-tab="section-shape-2">Specs 2</a></li>
        <li tab="tab3"> <a href="#section-shape-2" data-tab="section-shape-3">Price</a></li>
        <li tab="tab4" class="last"> <a href="#section-shape-2" data-tab="section-shape-4">Release Date</a> </li>
      </ul>
    </nav>

    <div class="sh-demo-content-wrap">
      <section class="sh-demo-content current-demo" data-section="section-shape-1">
        <h4>
                            iPhone LiquidMetal Concept
                        </h4>

      </section>

      <section class="sh-demo-content" data-section="section-shape-2">
        <h4>
                            Top 10 New Features Expected in Apple iPhone 5
                        </h4>

      </section>

      <section class="sh-demo-content" data-section="section-shape-3">
        <h4>
                            Price
                        </h4>
        <h5 style="font-weight: bold;">At this stage no official price has been unveiled but we expect the iPhone 5 to be the same price than the iPhone 4S when it was released. There are also some romours claiming that the iPhone 5 well be in the range of $699 and $899.</h5>
      </section>

      <section class="sh-demo-content" data-section="section-shape-4">
        <h4>
                            Release Date
                        </h4>
        <h5>Latest rumours are claiming that iPhone 5 to release in october 2012. </h5>
      </section>

    </div>

  </div>
</section>

CSS

/* stylesheet contains style for vertical tabbed content area */
 
 body {
   background: #e7ecea;
   color: #74777b;
   font-weight: 400;
   font-size: 1em;
   font-family: 'Raleway', Arial, sans-serif;
 }
 
 .sh-demo-wrap {
   padding: 50px;
 }
 
 .tabs-demo-style {
   height: 100%;
   margin: auto;
   color: #333;
 }
 
 .tabs-demo-style ul {
   float: left;
   width: 210px;
   display: block;
   position: relative;
   top: 0;
   border: 1px solid #DDD;
   border-right-width: 0;
   margin: auto 0;
   padding: 0;
 }
 
 .tabs-demo-style ul li.tab-demo-current {
   color: black;
   border-right: none;
   z-index: 10;
   background: #fff;
   position: relative;
   /* moz-box-shadow: inset 0 0 35px 5px #fafbfd;
                -webkit-box-shadow: inset 0 0 35px 5px #fafbfd;
                box-shadow: inset 0 0 35px 5px #fafbfd;*/
 }
 
 .tabs-demo-style .sh-demo-content {
   margin-left: 210px;
   border: 1px solid #ddd;
   background-color: #FFF;
   min-height: 400px;
   position: relative;
   z-index: 9;
   padding: 12px;
   /*  moz-box-shadow: inset 0 0 35px 5px #fafbfd;
                -webkit-box-shadow: inset 0 0 35px 5px #fafbfd;
                box-shadow: inset 0 0 35px 5px #fafbfd;*/
   display: none;
   padding: 25px;
 }
 
 .tabs-demo-style .sh-demo-content.current-demo {
   display: block;
 }
 
 .tabs-demo-style ul li {
   list-style-type: none;
   display: block;
   text-shadow: 0px 1px 1px #F2F1F0;
   font-size: 1.11em;
   position: relative;
   border-right-width: 0;
   border-bottom: 1px solid #DDD;
   margin: auto;
   padding: 0;
   background: whiteSmoke;
   background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
   background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
   background: -o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
   background: -ms-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
  ...

JavaScript

$("body").delegate(".tabs-demo-style ul li a", "click", function(e) {
  e.preventDefault();

  $('.tab-demo-current').removeClass('tab-demo-current');
  $(this).parent().addClass('tab-demo-current');
  var dataTab = $(this).attr('data-tab');

  $('.current-demo').removeClass('current-demo');
  $(".sh-demo-content-wrap .sh-demo-content[data-section=" + dataTab + "]").addClass('current-demo');

});