Rewriting tabs without JqueryUI fo simple styling rules

panikweb_templates/static/css/general.css

@@ -148,42 +148,16 @@ ul.inline li{
 /*USEFULL CLASSES */
 /******************/
 
-.ui-tabs, .ui-tabs-nav * { 
-	background: transparent !important; 
-	border: none !important; 
-} 
-.ui-tabs-nav * { 
-	padding:0 0 0 0 !important;
-	margin:0 0 0 0 !important;
-}
-.ui-tabs .ui-widget-header { 
-	background: transparent; 
-	border: none; 
-	-moz-border-radius: 0px; 
-	-webkit-border-radius: 0px; 
-	border-radius: 0px; 
-} 
-.ui-tabs .ui-tabs-nav  li {
-	display:inline-block;
-	white-space:normal !important;
-}
-.ui-tabs .ui-tabs-nav  a {
-	display:inline-block;
-	float:none !important;
-	padding:0.2em  !important;
-	font-family:'RegloNormal';
-	font-size:1em !important;
-	color: #000; 
-	border-bottom:2px solid transparent !important; 
-} 
-.ui-tabs .ui-tabs-nav .ui-state-active a { 
-	border-bottom:2px solid black !important; 
-	color: #000; 
-}
-.ui-tabs .ui-tabs-panel, .tabs .ui-tabs .ui-tabs-panel{
-	padding:0 0 0 0 !important;
-	margin:0 0 0 0 !important;
-	border: none !important; 
+
+.tabs nav ul{
+    display:table;
+    width:100%;
+	text-align:center;
+}
+.tabs nav ul li{
+	display:table-cell;
+	width:14%;
+	text-align:center;
 }
 
 .todo:hover, .todo *:hover{

panikweb_templates/static/css/specifics.css

@@ -481,16 +481,6 @@ button.tag {
 }
 /**** PROGRAMME ****/
 
-#Program .days{
-    display:table;
-    width:100%;
-	text-align:center;
-}
-#Program .days li{
-	display:table-cell;
-	width:14%;
-	text-align:center;
-}
 
 /**** SCREEN SIZE ADAPTATIONS ****/
     html #main{ font-size: 70%; }

panikweb_templates/static/js/specifics.js

-$(function() {
-	$(".tabs").tabs();
+$(function() {	
+	$(".tabs").each(function() {
+		var self = $(this);
+		$(this).find(".content:not(:first)").hide();
+		$(this).find("nav a").each(function() {
+		    $(this).click(function (e) {  
+			e.preventDefault();
+			// switch all tabs off  
+			self.find(".active").removeClass("active");  
+			// switch this tab on  
+			$(this).addClass("active");  
+			// slide all elements with the class 'content' up  
+			self.find(".content").fadeOut();  
+			//alert($(this).attr("href"));
+			// Now figure out what the 'title' attribute value is and find the element with that id.  Then slide that down.  
+			$($(this).attr("href")).fadeIn();  
+		
+		    });  
+		});  
+	});
 });

panikweb_templates/templates/program.html

@@ -3,13 +3,15 @@
 {% block listen %}{% endblock %}
 {% block main %}
 <div class="program tabs">
-	<ul class="days custom">
-	{% for day in days %}
-		<li class=""><a href="#Program-tabs-{{ day.datetime|date:"w" }}">{{ day.datetime|date:"D d" }}</a></li>
-	{% endfor %}
-	</ul>
+	<nav>
+		<ul class="days custom">
+		{% for day in days %}
+			<li class=""><a href="#Program-tabs-{{ day.datetime|date:"w" }}">{{ day.datetime|date:"D d" }}</a></li>
+		{% endfor %}
+		</ul>
+	</nav>
 	{% for day in days %}
-	<div class="padded" id="Program-tabs-{{ day.datetime|date:"w" }}">
+	<div class="content padded" id="Program-tabs-{{ day.datetime|date:"w" }}">
 		<ul class="custom emission-list list">
 		{% if day.schedules %}
 		    {% for schedule in day.schedules %}