hpfast/jsbin.aqalurI.css

## jsbin.aqalurI.css
#container{
  margin-top:20px;
  width:170px;
  height:30px;
  border: 1px solid #ccc;
  box-shadow: -1px 1px 1px 1px #ccc;
    overflow:hidden;
}
#container:hover{
  cursor:pointer
}

.half{
  width:50%;
  float:left;
  position:relative;
}

.right{

}


.slant{
  position:absolute;
  width:0;
  height:0;
  z-index:100

}

.slant-left{
  right:-10px;
  top:0;
  border-left:20px solid transparent;
  border-top: 30px solid white;
}

.slant-right{
  left:-10px;
  top:0;
  border-right:20px solid transparent;
  border-top: 30px solid white;
  filter: drop-shadow(9px 9px 9px 9px rgba(0,0,0,0.3))
}


p{
  margin:5px 10px;
  z-index:200;
  color:#ccc
}

.active{
  font-weight:normal;
}
.active p{
  color:black
}

.middle:after{
  box-shadow: 0 0 3px 0;
}

#middle{
  position:absolute;
  width:30px;
  height:30px;
  right:-15px;
  top:0px;
  overflow:hidden
}

#middle:after{
  content:"";
  position:absolute;
  height:80px;
  width:80px;
  top:-42px;
  right:17px;
  transform:rotate(45deg);
}
#middle2{
  position:absolute;
  width:30px;
  height:30px;
  left:-15px;
  top:0px;
  overflow:hidden
}

#middle2:after{
  content:"";
  position:absolute;
  height:80px;
  width:80px;
  top:-42px;
  left:17px;
  transform:rotate(45deg)
}


## jsbin.aqalurI.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="container" class="right-active">

    <div id="left" class="left half active">
      <p>Textuality</p>
      <div id="middle" class="middle"></div>
    </div>

    <div id="right" class="right half">
      <p>Toxomity</p>
      <div id="middle2" class="middle"></div>
    </div>
  </div>
</body>
</html>

## jsbin.aqalurI.js
$(document).ready(function(){
  $('#middle2').hide();
});

$('#container').click(function(){
  if ($(this).hasClass('right-active')){
    $(this).toggleClass('right-active', 'left-active');
    $('.half').toggleClass('active');
    $('#middle2').show();
      $('#middle').hide();

  } else{
        $(this).toggleClass('right-active', 'left-active');
      $('#middle').show();
      $('#middle2').hide();
      $('.half').toggleClass('active');

  }
  });
	#container{
	margin-top:20px;
	width:170px;
	height:30px;
	border: 1px solid #ccc;
	box-shadow: -1px 1px 1px 1px #ccc;
	overflow:hidden;
	}
	#container:hover{
	cursor:pointer
	}

	.half{
	width:50%;
	float:left;
	position:relative;
	}

	.right{

	}


	.slant{
	position:absolute;
	width:0;
	height:0;
	z-index:100

	}

	.slant-left{
	right:-10px;
	top:0;
	border-left:20px solid transparent;
	border-top: 30px solid white;
	}

	.slant-right{
	left:-10px;
	top:0;
	border-right:20px solid transparent;
	border-top: 30px solid white;
	filter: drop-shadow(9px 9px 9px 9px rgba(0,0,0,0.3))
	}



	p{
	margin:5px 10px;
	z-index:200;
	color:#ccc
	}

	.active{
	font-weight:normal;
	}
	.active p{
	color:black
	}

	.middle:after{
	box-shadow: 0 0 3px 0;
	}

	#middle{
	position:absolute;
	width:30px;
	height:30px;
	right:-15px;
	top:0px;
	overflow:hidden
	}

	#middle:after{
	content:"";
	position:absolute;
	height:80px;
	width:80px;
	top:-42px;
	right:17px;
	transform:rotate(45deg);
	}
	#middle2{
	position:absolute;
	width:30px;
	height:30px;
	left:-15px;
	top:0px;
	overflow:hidden
	}

	#middle2:after{
	content:"";
	position:absolute;
	height:80px;
	width:80px;
	top:-42px;
	left:17px;
	transform:rotate(45deg)
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
	<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<div id="container" class="right-active">

	<div id="left" class="left half active">
	<p>Textuality</p>
	<div id="middle" class="middle"></div>
	</div>

	<div id="right" class="right half">
	<p>Toxomity</p>
	<div id="middle2" class="middle"></div>
	</div>
	</div>
	</body>
	</html>
	$(document).ready(function(){
	$('#middle2').hide();
	});

	$('#container').click(function(){
	if ($(this).hasClass('right-active')){
	$(this).toggleClass('right-active', 'left-active');
	$('.half').toggleClass('active');
	$('#middle2').show();
	$('#middle').hide();

	} else{
	$(this).toggleClass('right-active', 'left-active');
	$('#middle').show();
	$('#middle2').hide();
	$('.half').toggleClass('active');

	}
	});