Skip to content

Instantly share code, notes, and snippets.

Created December 13, 2013 13:55
Show Gist options
  • Save anonymous/7944557 to your computer and use it in GitHub Desktop.
Save anonymous/7944557 to your computer and use it in GitHub Desktop.
#container{
margin-top:20px;
width:100%;
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 p{
position:absolute;
left: 5px
}
#left p{
float: right;
margin-right:10px;
padding-right:10px
}
.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');
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment