CodePen Embed - Bootstrap 3

<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">&#xE8E7;</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&deg;</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;
  });
});

This Pen is owned by Chris B on CodePen.

See more by @cbodanza on CodePen

External CSS

External JavaScript