selection div

by Cosette Girardot

HTML

<div class="sidebar">
    <div class="sidebarContent sbselection_1">
        <div id="dkpurpletriangle"></div>
    </div>
    <div class="sidebarContent sbselection_2">
        <div id="orangetriangle"></div>
    </div>
    <div class="sidebarContent sbselection_3">
        <div id="powderbluetriangle"></div>
    </div>
</div>
<div class="clickables" >
    <div class="talkbubble clicked">
        <input type="hidden" class="tbselector" value="sbselection_1" />
        <div class="thumbnail">
            <img src="images/thumbnail1.png" height="33" width="30" />
        </div>
        <div class="words">Event 1</div>
    </div>
        
    <div class="talkbubble">
        <input type="hidden" class="tbselector" value="sbselection_2" />
        <div class="thumbnail">
           <img src="images/thumbnail1.png" height="33" width="30" align="middle" />
        </div>
        <div class="words">Event 2</div>
    </div>
        
    <div class="talkbubble">
        <input type="hidden" class="tbselector" value="sbselection_3" />
        <div class="thumbnail">
           <img src="images/thumbnail1.png" height="33" width="30" align="middle" />
        </div>
        <div class="words">Event 3</div>
    </div>
</div>

CSS

.sidebar{ 
	position: absolute;
	background-color: rgb(153,153,153);
	width: 250px;
	height: 300px;
}
.sidebarcontent{
    display:none;
    overflow:hidden;
}
.clickables {
    position: absolute;
    left: 270px;
}			
.talkbubble {
	background: white;
	color: rgb(0,0,0);
	font-family: Rockwell, Garamond, "MS Serif", "New York", serif;
	font-size: 12px;
	height: 40px;
	margin-top: 1%;
    margin-bottom: 20px;
	position: relative;
	width: 130px;	
	z-index: 5;
}
.talkbubble:before {
	border-top: 10px solid transparent; 
	border-right: 10px solid white; 
	border-bottom: 10px solid transparent; 
	content:""; 
	height: 0; 
	position: absolute; 
	right: 100%; 
	top: 10px; 
	width: 0; 	
}
.clicked {
    background:rgb(153,153,153);
}
.clicked:before {
    border-right-color:rgb(153,153,153);
}
.talkbubble:hover{
	background-color: rgb(112,112,112);
	color: rgb(255,255,255);
}
.talkbubble:hover:before {
    border-right-color: rgb(112,112,112);
}

.thumbnail {
	height: 33px;
	width: 30px;
	float: left;
	position: absolute;
	margin: 4px;
	z-index: 2;
	left: 2px;
	top: 0px;
}
.words {
	height: 24px;
	width: 150px;
	position: absolute;
	float: right;
	left: 40px;
	top: 10px;
}
#orangetriangle{
	border-top:25px solid green;
	height: 0;
	position:absolute;
	width: 0;
	z-index:3;	
	border-right: 25px solid transparent;
	height: 0;
	position:absolute;
	width: 0;
	z-index:5;
	border-top-color: rgb(255,138,0);
}
#dkpurpletriangle{
	border-top:25px solid green;
	height: 0;
	position:absolute;
	width: 0;
	z-index:3;	
	border-right: 25px solid transparent;
	height: 0;
	position:absolute;
	width: 0;
	z-index:5;
	border-top-color: rgb(120,3,105)
}
#powderbluetriangle{
	border-top:25px solid green;
	height: 0;
	position:absolute;
	width: 0;
	z-index:3;	
	border-right: 25px solid transparent;
	height: 0;
	position:absolute;
	width: 0;
	z-index:5;
	border-top-color: rgb(99,89,288);
}

JavaScript

$(document).ready(function () {
    showSideBar('sbselection_1');
    $('.talkbubble').click(function () {
        var sidebarSelector = $(this).find('.tbselector').val();
        showSideBar(sidebarSelector);
    });
	$('.clickables').on('click','.talkbubble',function () {
		$(this).siblings('.talkbubble').removeClass('clicked');
		$(this).addClass('clicked');
	});
		
});
function showSideBar(selector) {
    $('.sidebarContent').hide();
    $('.sidebarContent.' + selector).show();
}