Friday 28 March 2014

Magento Add Tab in Product Detail Page.

Please add following code in Page which you want.
















<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<style>
   
.tabset {
    overflow:hidden;
    margin:0 0 -9px;
}
.tabset li {
    float:left;
    margin:5px 11px 0 0;
    padding:0px 0 9px;
        list-style: none;
       
}
.tabset li a {
    display:block;
    padding:8px 20px;
    background:#bfbfbf;
    text-align:center;
    text-decoration:none;
    color:#fff;
}
.tabset li a:hover,
.tabset li.active a,
.tabset li:hover a {background:#eb5594;}
.tab-content-wrap {
    padding:10px;
    background:#fff;
    border:1px solid #dcdcdc;
    min-height: 150px;
        width: 600px;
}
.tab-content {
    display: none;
}
   
</style>


<ul id="collateral-tabs" class="tabset">
    <li class="tab"><a href="#" id="description">Tab-1</a></li>
    <li class="tab"><a href="#" id="additional">Tab-2</a></li>
    <li class="tab"><a href="#" id="tab-3">Tab-3</a></li>
    <li class="tab"><a href="#" id="tab-4">Tab-4</a></li>
</ul>
<div class="tab-container">
    <div class="tab-content-wrap">
        <div class="tab-content tab-description">
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when ...  
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when ...
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when ...
        </div>                          
        <div class="tab-content tab-additional">
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when ...  
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when ...
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when ...
        </div> 
         <div class="tab-content tab-tab-3">
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when ...  
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when ...
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when ...
        </div>
        <div class="tab-content tab-tab-4">
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when ...  
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when ...
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when ...
        </div>
    </div>
</div>

<script type="text/javascript">
   
jQuery(document).ready(function(){
    jQuery('.tab:first').addClass('active');
        jQuery('.tab-content:first').fadeIn(400).addClass('active');
        jQuery('.tabset li a').click(function(){
                var newTab = jQuery(this).attr('id');
                jQuery('.tabset li').removeClass('active');
                jQuery(this).parent('li').addClass('active');
                jQuery('.tab-content.active').removeClass('active').fadeOut(100, function(){
                        jQuery('.tab-content.tab-'+ newTab).delay(120).fadeIn(400).addClass('active');
                });
                return false;
        });   
});
   
</script>

2 comments: