<div class="recipe">
<div class="recipe-panel">
<div class="recipe-cover">
<div class="cont_img_back">
<img src="https://s-media-cache-ak0.pinimg.com/736x/57/98/9f/57989f2a2e186e38bf93429aa395120c.jpg" alt="" style="width: 350px; margin-top: -30px;" />
</div>
<div class="cont_mins">
<div class="sub_mins">
<h3>50</h3>
<span>MINS</span>
</div>
<div class="cont_icon_right">
<a href="#"><i class="material-icons"></i></a>
</div>
</div>
<div class="cont_servings">
<h3>4</h3>
<span>SERVINGS</span>
</div>
<div class="cont_detalles">
<h3>Shakshuka With Feta</h3>
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis est est aliquam, sed faucibus massa lobortis. Maecenas non est justo.</p>
</div>
</div>
<div class="recipe-content">
<div class="tabs tabs-style-underline">
<nav>
<ul class="nav nav-tabs nav-justified" role="tablist">
<li role="presentation"><a href="#ingredients" aria-controls="home" role="tab" data-toggle="tab">Ingredients</a></li>
<li role="presentation" class="active"><a href="#preperation" aria-controls="profile" role="tab" data-toggle="tab">Preperation</a></li>
</ul>
</nav>
</div>
<div class="tab-content ">
<div role="tabpanel " class="tab-pane fade in active" id="ingredients">
</div>
<div role="tabpane2" class="tab-pane fade" id="preperation">
<div class="cont_text_det_preparation">
<div class="cont_title_preparation">
<p>STEP 1</p>
</div>
<div class="cont_info_preparation">
<p>Heat oven to 375°</p>
</div>
<div class="cont_text_det_preparation">
<div class="cont_title_preparation">
<p>STEP 2</p>
</div>
<div class="cont_info_preparation">
<p>Heat oil in a large skillet over medium-low head. Add onion and bell papper. Cook gently until very soft, about 20 minutes. Add garlic and cook until tender, 1 to 2 minutes; stir in cumin, paprika and cook 1 minute. Pour in tomatoes and season with 3/4 teaspoon salt and 1/4 teaspoon pepper;</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="recipe-toggle">
<a href="#" class="btn btn-link"><span class="material-icons">arrow_back</span></a>
</div>
</div>
$r-width: 300px;
$r-height: 360px;
$r-bg: #fff;
$r-radius: 5px;
$r-cover-bg: #666;
$r-content-bg: #bbb;
body {
background: #ccc;
font-family: 'Roboto';
}
.btn:focus, .btn:active { outline: none; }
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:focus,
.nav-tabs.nav-justified > .active > a:hover {
border: none;
outline: none;
border-radius: none;
}
.recipe {
position: relative;
margin: 50px auto;
width: $r-width;
height: $r-height;
background: $r-bg;
//overflow: hidden;
border-radius: $r-radius;
box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.3);
transition: all 0.8s;
.recipe-panel {
display: block;
position: relative;
width: 100%;
height: $r-height;
overflow: hidden;
}
.recipe-toggle {
background: #fff;
position: absolute;
right: -18px;
top: 50%;
margin-top: -20px;
//border-top-left-radius: 0.5rem;
border-radius: 50%;
z-index: 20;
transition: all 0.8s;
.btn, .btn-link {
top: 0;
line-height: 48px;
margin: 0;
padding: 0;
text-align: center;
height: 40px;
width: 40px;
span {
displaay: relative;
font-size: 3.4rem;
line-height: 54px;
top: 3px;
right: 20px;
transform: rotate(180deg);
transition: all 0.8s;
}
}
}
}
.recipe-cover {
position: relative;
width: $r-width;
height: 360px;
overflow: hidden;
background: $r-cover-bg;
border-radius: $r-radius;
z-index: 10;
}
.recipe-content {
position: absolute;
top: 0;
right: 0px;
bottom: 0;
width: 360px;
height: 100%;
padding: 0 35px;
.tabs {
font-size: 1.25rem;
font-weight: 300;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 100%;
&.tabs-style-underline nav {
background: #fff none repeat scroll 0 0;
}
nav { text-align: center; }
}
.tabs nav ul {
display: flex;
flex-flow: row wrap;
justify-content: center;
list-style: outside none none;
margin: 0 auto;
max-width: 1200px;
padding: 0;
position: relative;
li {
display: block;
flex: 1 1 0;
margin: 0;
position: relative;
text-align: center;
z-index: 1;
}
a {
display: block;
font-size: 1.2rem;
line-height: 3.4;
overflow: hidden;
position: relative;
text-overflow: ellipsis;
white-space: nowrap;
font-family: 'Montserrat';
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.08rem;
//color: #2cc185;
color: lighten(#74777B, 10%);
outline: none;
text-decoration: none;
border-radius: none;
}
}
.tabs-style-underline nav a {
//border-left: 1px solid #e7ecea;
padding: 0.25em 0 0.5em;
transition: color 0.2s ease 0s;
}
.tabs-style-underline nav li a::after {
background: #2cc185 none repeat scroll 0 0;
bottom: 0;
content: "";
height: 6px;
left: 0;
position: absolute;
transform: translate3d(0px, 150%, 0px);
transition: transform 0.3s ease 0s;
width: 100%;
}
.tabs nav li.active a {
color: darken(#74777B, 20%);
}
.tabs-style-underline nav li.active a::after {
transform: translate3d(0px, 0px, 0px);
}
}
.recipe-open {
width: 660px;
.recipe-toggle {
right: -20px;
margin-top: -25px;
.btn, .btn-link {
span { transform: rotate(0deg); }
}
}
}
View Compiled
;( function( window ) {
'use strict';
function extend( a, b ) {
for( var key in b ) {
if( b.hasOwnProperty( key ) ) {
a[key] = b[key];
}
}
return a;
}
function CBPFWTabs( el, options ) {
this.el = el;
this.options = extend( {}, this.options );
extend( this.options, options );
this._init();
}
CBPFWTabs.prototype.options = {
start : 0
};
CBPFWTabs.prototype._init = function() {
// tabs elems
this.tabs = [].slice.call( this.el.querySelectorAll( 'nav > ul > li' ) );
// content items
this.items = [].slice.call( this.el.querySelectorAll( '.content-wrap > section' ) );
// current index
this.current = -1;
// show current content item
this._show();
// init events
this._initEvents();
};
CBPFWTabs.prototype._initEvents = function() {
var self = this;
this.tabs.forEach( function( tab, idx ) {
tab.addEventListener( 'click', function( ev ) {
ev.preventDefault();
self._show( idx );
} );
} );
};
CBPFWTabs.prototype._show = function( idx ) {
if( this.current >= 0 ) {
this.tabs[ this.current ].className = this.items[ this.current ].className = '';
}
// change current
this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0;
this.tabs[ this.current ].className = 'tab-current';
this.items[ this.current ].className = 'content-current';
};
// add to global namespace
window.CBPFWTabs = CBPFWTabs;
})( window );
$(function(){
$('.recipe-toggle .btn').click(function(){
$('.recipe').toggleClass('recipe-open');
return false;
});
});