added tabs for meeting for inner details

This commit is contained in:
Karen 2011-09-17 00:30:17 +05:30
parent d1877d044a
commit 1de7e2d705
3 changed files with 102 additions and 1 deletions

View File

@ -0,0 +1,57 @@
ul.tabsInnerRight {
/*float: left;*/
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
width: 100%;
margin:0 auto;
}
ul.tabsInnerRight li {
float: left;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #e0e0e0;
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
background: #FFF;
}
ul.tabsInnerRight li a {
text-decoration: none;
color: #FFB80F;
display: block;
font-size: 14px;
padding: 0 20px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabsInnerRight li a:hover {
background: #f2f2f2;
}
html ul.tabsInnerRight li.active, html ul.tabsInnerRight li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_container {
border:1px solid #e0e0e0;
border-top: none;
overflow: hidden;
clear: both;
float: left;
width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 14px;
}

View File

@ -13,7 +13,8 @@ margin-top:20px;
border-radius:8px; border-radius:8px;
-moz-box-shadow:2px 3px 20px #252425; -moz-box-shadow:2px 3px 20px #252425;
-webkit-box-shadow:2px 3px 20px #252425; -webkit-box-shadow:2px 3px 20px #252425;
box-shadow:2px 3px 20px #252425;} box-shadow:2px 3px 20px #252425;
overflow:auto;}
.itfInfoSub .itfInfoSub
{color:#f7bd00; {color:#f7bd00;

View File

@ -0,0 +1,43 @@
<link rel="stylesheet" href="../static/css/modules/tabsinnerright.css" type="text/css" />
<ul class="tabsInnerRight">
<li><a href="#tab1">Tab1</a></li>
<li><a href="#tab2">Tab2</a></li>
<li><a href="#tab3">Tab3</a></li>
<li><a href="#tab4">Tab4</a></li>
<li><a href="#tab5">Tab5</a></li>
<li><a href="#tab6">Tab6</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
Organised 50 years after the original Drama Seminar in 1957, the Not the Drama Seminar (NTDS) brought together theatre practitioners from all across the country to convene at Ninasam, Heggodu in March 2008. This seminar meditated on the nature of theatre in India today, on how we got to where we are. The attempt was to understand 'Indian Theatre' in all its multiplicity and diversity, bringing these several faces of Indian theatre face to face, and problemetize the issues that arise therein. These ideas were exchanged through a series of presentations and discussions over five days, and each day ended with a performance. <!--Content-->
</div>
<div id="tab2" class="tab_content">
b <!--Content-->
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabsInnerRight li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabsInnerRight li").click(function() {
$("ul.tabsInnerRight li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
</script>