Tabs on a CMS page in PS 1.6

VektorSoft · October 6, 2014

Dear everybody,

First we have to change our tinyMCE rich text editor to an extended version, because we need to run script. Just follow Vekia great decription:

http://www.prestashop.com/forums/topic/318425-tutorial-tinymce-rich-text-editor-extended-version/

Second here is an code, but it's 90% only, beacuse has a problem.

The source:

http://www.prestashop.com/forums/topic/170472-tutorial-tabs-for-cms-content/

<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
	//  When user clicks on tab, this code will be executed
	$("#tabs li").click(function() {
		//  First remove class "active" from currently active tab
		$("#tabs li").removeClass('active');

		//  Now add class "active" to the selected/clicked tab
		$(this).addClass("active");

		//  Hide all tab content
		$(".tab_content").hide();

		//  Here we get the href value of the selected tab
		var selected_tab = $(this).find("a").attr("href");

		//  Show the selected tab content
		$(selected_tab).fadeIn();

		//  At the end, we add return false so that the click on the link is not executed
		return false;
	});
});
// ]]></script>
<p> </p>
<div id="tabs_container">
	<ul id="tabs">
		<li class="active"><a href="#tab1">Tab 1 name</a></li>
		<li><a href="#tab2">Tab 2 name</a></li>
		<li><a href="#tab3">Tab 3 name</a></li>
	</ul>
</div>
<div id="tabs_content_container">
	<div id="tab1" class="tab_content" style="display: block;">
		<p>Tab 1 content</p>
	</div>
	<div id="tab2" class="tab_content">
		<p>Tab 2 content</p>
	</div>
	<div id="tab3" class="tab_content">
		<p>Tab 3 content</p>
	</div>
</div>

The problem is that, if you don't click on any tab, the first tab show the all content.

If you click on someone, then will works well.

I hope it can be usefull and somebody know repair the code.

Thx, Gyula

vekia · October 7, 2014

to other tabs css styles add display:none;

VektorSoft · October 7, 2014

Dear Vekia,

Thx your answer, but I'm not an expert...sorry..

I pasted the css code too, and would like ask you show me, where / what have to change.

(in the css or ind script or in the <div>)

Many thx, Gyula

#tabs_wrapper {
	width: 422px;
}
#tabs_container {
	border-bottom: 1px solid #ccc;
}
#tabs {
	list-style: none;
	padding: 5px 0 4px 0;
	margin: 0 0 0 10px;
	font: 1em arial;
}
#tabs li {
	display: inline;
}
#tabs li a {
	border: 1px solid #ccc;
	padding: 4px 6px;
	text-decoration: none;
	background-color: #eeeeee;
	border-bottom: none;
	outline: none;
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
}
#tabs li a:hover {
	background-color: #dddddd;
	padding: 4px 6px;
}
#tabs li.active a {
	border-bottom: 1px solid #fff;
	background-color: #fff;
	padding: 4px 6px 5px 6px;
	border-bottom: none;
}
#tabs li.active a:hover {
	background-color: #eeeeee;
	padding: 4px 6px 5px 6px;
	border-bottom: none;
}

#tabs li a.icon_accept:hover {
	padding-left: 24px;
}

#tabs_content_container {
	border: 0px solid #ccc;
	border-top: none;
	padding: 10px;
    height:400px; /*container hight overflow will add scrollbar*/
    overflow: auto;
    overflow-x: auto;
    overflow-y: auto;
}

vekia · October 8, 2014

	<div id="tab2" class="tab_content" style="display:none;">
		<p>Tab 2 content</p>
	</div>
	<div id="tab3" class="tab_content" style="display:none;">
		<p>Tab 3 content</p>
	</div>

:-)

VektorSoft · October 8, 2014

Dear Vekia,

Your soulution works fine, but there is a problem with the Extended tinyMCE rich text editor.

If I click on the save button and open again (edit), the

style="display:none;"

style="display:block;"

disappears and so doesen't work the code.

This you can see on the attached screenshots.

Thx your job, Gyula

vekia · October 9, 2014

so add to these tabs calss "hideclass" and in css styles use

.hideclass {display:none;}

VektorSoft · October 9, 2014

Dear Vekia,

OMG, it works

Just a little modification:

In the css need to add this:

#tabs_content_container .hideclass {
	display:none;
}

Thx your help, and have a nice night.

„Polak, Węgier, dwa bratanki, i do szabli, i do szklanki.”

goodshopping.tv · November 24, 2014

Hi, I've added other 4 tabs so that I've now 7 tabs corresponding to the days of a week.

Is there any possibility to render active the tab corresponding to the day of the week (i.e. today tab active monday).

I assume there is a lot of job to be done...

Thank you in advance for any help.

Gil

vekia · November 24, 2014

only with jquery script

does your cms editor supports js ?

goodshopping.tv · November 24, 2014

only with jquery script

does your cms editor supports js ?

I assume yes: I've just inserted the script for the tabs. Or it's a different thing?

vekia · November 24, 2014

I assume yes: I've just inserted the script for the tabs. Or it's a different thing?

okay, so can you please share url to page where the tabs are created?

i will prepare jquery code.

goodshopping.tv · November 24, 2014

Vekia, thank you for your help: one question, is it okay also for the PS version 1.5.6.1? I noted this topic was opened for the version 1.6. Sorry I saw it in delay.

vekia · November 24, 2014

code here is universal, should work also with ps 1.5

goodshopping.tv · November 24, 2014

Vekia, thank you so much: here is the url

vekia · November 24, 2014

$(document).ready(function(){
var d = new Date();
var n = d.getDay();
$("#tabs li").removeClass('active');
$(".day"+n).addClass('active');
$(".tab_content").hide();
$("#tab"+n).show();
})

use this javascript :-)

vekia · November 24, 2014

i forgot about one thing

to elemts with <li> items add:

class="day1"
class="day2"

class="day3"

and so on

goodshopping.tv · November 25, 2014

Vekia, thank you so much for the code: since I'm not so practic with the code can you help me some more.
I have now this kind of code for the tabs:

<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
	//  When user clicks on tab, this code will be executed
	$("#tabs li").click(function() {
		//  First remove class "active" from currently active tab
		$("#tabs li").removeClass('active');

		//  Now add class "active" to the selected/clicked tab
		$(this).addClass("active");

		//  Hide all tab content
		$(".tab_content").hide();

		//  Here we get the href value of the selected tab
		var selected_tab = $(this).find("a").attr("href");

		//  Show the selected tab content
		$(selected_tab).fadeIn();

		//  At the end, we add return false so that the click on the link is not executed
		return false;
	});
});
// ]]></script>

should I subsitute the entire code or add you lines and where? Any modification to the CSS?

Thank you in advance.

Gil

vekia · November 25, 2014

hello

use this:

<script type="text/javascript">
$(document).ready(function(){
	//  When user clicks on tab, this code will be executed
	$("#tabs li").click(function() {
		//  First remove class "active" from currently active tab
		$("#tabs li").removeClass('active');

		//  Now add class "active" to the selected/clicked tab
		$(this).addClass("active");

		//  Hide all tab content
		$(".tab_content").hide();

		//  Here we get the href value of the selected tab
		var selected_tab = $(this).find("a").attr("href");

		//  Show the selected tab content
		$(selected_tab).fadeIn();

		//  At the end, we add return false so that the click on the link is not executed
		return false;
	});
});

$(document).ready(function(){
var d = new Date();
var n = d.getDay();
$("#tabs li").removeClass('active');
$(".day"+n).addClass('active');
$(".tab_content").hide();
$("#tab"+n).show();
})

</script>

vekia · November 25, 2014

and you don't have to alter anything related to css.

the only one thing you have to do in addition to this js code are classes that i mentioned in post #16

goodshopping.tv · November 25, 2014

Vekia, thank you for your help: unfortunately it doesn't function. If you go to the url you'll see it. Is it depending from the fact that I've doubled the code on the bottom because I need to show two different tabs? Or something related to the tabs? I've substituted the code and discharged my cache.

vekia · November 25, 2014

li elements still haven't got classes that i suggested to use

to elemts with <li> items add:

class="day1"
class="day2"

class="day3"

and so on

+ i don't see js code there.

goodshopping.tv · November 25, 2014

Vekia, you're right: now I inserted the classes and seems to function but it not displays the tab content until you click on.

and regards the js code, what do you mean?

vekia · November 25, 2014

changes are online? i don't see them

goodshopping.tv · November 25, 2014

yes they are point to this url http://www.goodshopping.tv/content/43-programmi-tv

vekia · November 25, 2014

you use 2 tabs:

as you can see in second it works.

your tab contents elements have got the same id="" it's not good.

element must have own unique id. it's not possible to use the same id for two different elements.

to each tab contents:

add class="tabContents1" 2,3,4, and so on, where the number is the number of day.

then in js script that you added change line:

$("#tab"+n).show();

to

$(".tabContents"+n).show();

goodshopping.tv · November 25, 2014

Vekia, tried to change the js script in the two tabs and just rename everything from tabContents1-7 (first tab's group) to tabContents8-14 (second tab's group): is it OK? Unfortunately it doesn't function anymore. Is it possible that the two js codes on the same page conflict in some way?

goodshopping.tv · November 25, 2014

Vekia, tried to change the js script in the two tabs and just rename everything from tabContents1-7 (first tab's group) to tabContents8-14 (second tab's group): is it OK? Unfortunately it doesn't function anymore. Is it possible that the two js codes on the same page conflict in some way?

Vekia I enclose here the entire code on my page

<p>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
	//  When user clicks on tab, this code will be executed
	$("#tabs li").click(function() {
		//  First remove class "active" from currently active tab
		$("#tabs li").removeClass('active');

		//  Now add class "active" to the selected/clicked tab
		$(this).addClass("active");

		//  Hide all tab content
		$(".tab_content").hide();

		//  Here we get the href value of the selected tab
		var selected_tab = $(this).find("a").attr("href");

		//  Show the selected tab content
		$(selected_tab).fadeIn();

		//  At the end, we add return false so that the click on the link is not executed
		return false;
	});
});

$(document).ready(function(){
var d = new Date();
var n = d.getDay();
$("#tabs li").removeClass('active');
$(".day"+n).addClass('active');
$(".tab_content").hide();
$(".tabContents"+n).show();
})
// ]]></script>
</p>
<h3>PROGRAMMI A DIFFUSIONE REGIONALE</h3>
<p><br /><br /></p>
<div id="tabs_container">
<ul id="tabs">
<li class="tabContents1"><a href="#tabContents1">Lunedí</a></li>
<li class=""tabContents2"><a href="#tabContents2">Martedì</a></li>
<li class="tabContents3"><a href="#tabContents3">Mercoledì</a></li>
<li class="tabContents4"><a href="#tabContents4">Giovedì</a></li>
<li class="tabContents5"><a href="#tabContents5">Venerdì</a></li>
<li class="tabContents6"><a href="#tabContents6">Sabato</a></li>
<li class="tabContents7"><a href="#tabContents7">Domenica</a></li>
</ul>
</div>
<div id="tabs_content_container">
<div id="tabContents1" class="tab_content" style="display: block;">
<div class="lunedi">
<h3 style="text-align: left;">Lunedì 24 Novembre 2014</h3>
<br />
<table id="programmi_tv" border="1">
<tbody>
<tr><th>Orario</th><th>Azienda</th><th>Orario</th><th>Azienda</th></tr>
<tr>
<td>09.00</td>
<td>SOCIETA' VASAI<br />Pentole in terracotta</td>
<td>15.15</td>
<td>FORNO COLLIVASONE<br />Offelle</td>
</tr>
<tr>
<td>09.15</td>
<td>NATALE<br />Tartufotto</td>
<td>15.30</td>
<td>JUVOVITA<br />Integratore alimentare</td>
</tr>
<tr>
<td>09.30</td>
<td>BASI ACHILLE<br />Spugne</td>
<td>15.45</td>
<td>NATALE<br />Pavese</td>
</tr>
<tr>
<td>09.45</td>
<td>MDD<br />Guanti, crema depilatoria</td>
<td>16.00</td>
<td>BISCOTTIFICIO BELLI<br />Cantucci</td>
</tr>
<tr>
<td>10.00</td>
<td>NATALE<br />Pasta e sughi</td>
<td>16.15</td>
<td>TENUTA BORGOLANO<br />Vini Oltrepò Pavese</td>
</tr>
<tr>
<td>10.15</td>
<td>PASTICCERIA BORDONI<br />Panettoni</td>
<td>16.30</td>
<td>RED LINE<br />Plantari</td>
</tr>
<tr>
<td>10.30</td>
<td>L & D RELAXLINE<br />Materassi</td>
<td>16.45</td>
<td>NATALE<br />Selezione liquori</td>
</tr>
<tr>
<td>10.45</td>
<td>OZONOMATIC<br />Creme ossigeno-ozono</td>
<td>17.00</td>
<td>DEDOMENICI<br />Salumi Oltrepò</td>
</tr>
<tr>
<td>11.00</td>
<td>NATALE<br />Ligure</td>
<td>17.15</td>
<td>SANTA RITA<br />Pastificio</td>
</tr>
<tr>
<td>11.15</td>
<td>CORTE DI BRIGNANO<br />Salame</td>
<td>17.30</td>
<td>NATALE<br />Salse</td>
</tr>
<tr>
<td>14.00</td>
<td>ZAFFERANO DI ROSSO<br />Zafferano</td>
<td>17.45</td>
<td>FERRARO<br />Bresaola</td>
</tr>
<tr>
<td>14.15</td>
<td>NATALE<br />Salumeria</td>
<td>18.00</td>
<td>POLYMED<br />Palestrina</td>
</tr>
<tr>
<td>14.30</td>
<td>LE CAMPANELLE<br />Confetture e salse</td>
<td>18.15</td>
<td>NATALE<br />Gourmet</td>
</tr>
<tr>
<td>14.45</td>
<td>EVVIVO<br />Panettoni</td>
<td>18.30</td>
<td>STEVIA'S<br />Dolcificante</td>
</tr>
<tr>
<td>15.00</td>
<td>NATALE<br />Benessere corpo</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="tabContents2" class="tab_content" style="display: block;">
<div class="martedi">
<h3>Martedì 25 Novembre 2014</h3>
<br />
<table id="programmi_tv">
<tbody>
<tr><th>Orario</th><th>Azienda</th><th>Orario</th><th>Azienda</th></tr>
<tr>
<td>09.00</td>
<td>NATALE<br />Goloso</td>
<td>15.15</td>
<td>RANISE ALIMENTARE<br />Olio, Olive, Pesto</td>
</tr>
<tr>
<td>09.15</td>
<td>ZAFFERANO DI ROSSO<br />Zafferano</td>
<td>15.30</td>
<td>SAPORI ANTICHI<br />Pasta colorata</td>
</tr>
<tr>
<td>09.30</td>
<td>VERDEVERO<br />Detersivi Biologici</td>
<td>15.45</td>
<td>SAPORI ANTICHI<br />Pasta colorata</td>
</tr>
<tr>
<td>09.45</td>
<td>NATALE<br />Pavese</td>
<td>16.00</td>
<td>NATALE<br />Prelibato</td>
</tr>
<tr>
<td>10.00</td>
<td>AMICI PER LA PELLE<br />Cosmesi bava di lumaca</td>
<td>16.15</td>
<td>KAUAI GIOIELLI<br />Anelli e bracciali</td>
</tr>
<tr>
<td>10.15</td>
<td>PIANETTA di BARBIERI<br />Mostarda</td>
<td>16.30</td>
<td>TARTUFI JIMMY<br />Tartufi</td>
</tr>
<tr>
<td>10.30</td>
<td>PIANETTA di BARBIERI<br />Mostarda</td>
<td>16.45</td>
<td>PIRLO DOLCI<br />Pirlotti, Pandolce</td>
</tr>
<tr>
<td>10.45</td>
<td>NATALE<br />Salumeria</td>
<td>17.00</td>
<td>PODERE CAMPRIANO<br />Vino Chianti e mosto</td>
</tr>
<tr>
<td>11.00</td>
<td>LA VALDOTAINE<br />Confetture</td>
<td>17.15</td>
<td>NATALE<br />Argan</td>
</tr>
<tr>
<td>11.15</td>
<td>URSINI<br />Sughi, Olio</td>
<td>17.30</td>
<td>FABBRICA DEI NOCCIOLINI<br />Biscotti</td>
</tr>
<tr>
<td>14.00</td>
<td>NATALE<br />Gusto</td>
<td>17.45</td>
<td>NATALE<br />Selezione vini</td>
</tr>
<tr>
<td>14.15</td>
<td>BASI ACHILLE<br />Spugne</td>
<td>18.00</td>
<td>FORNO COLLIVASONE<br />Offelle</td>
</tr>
<tr>
<td>14.30</td>
<td>STROPPIANA CHOCOLATE<br />Cioccolato</td>
<td>18.15</td>
<td>OZONOMATIC<br />Creme ossigeno-ozono</td>
</tr>
<tr>
<td>14.45</td>
<td>NATALE<br />Tartufotto</td>
<td>18.30</td>
<td>NATALE<br />Bamboo</td>
</tr>
<tr>
<td>15.00</td>
<td>MDD<br />Guanti, crema depilatoria</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="tabContents3" class="tab_content" style="display: none;">
<div class="mercoledi">
<h3>Mercoledì 26 Novembre 2014</h3>
<br />
<table id="programmi_tv">
<tbody>
<tr><th>Orario</th><th>Azienda</th><th>Orario</th><th>Azienda</th></tr>
<tr>
<td>09.00</td>
<td>LE CAMPANELLE<br />Confetture e salse</td>
<td>15.15</td>
<td>NATALE<br />Pasta e sughi</td>
</tr>
<tr>
<td>09.15</td>
<td>NATALE<br />Salumeria</td>
<td>15.30</td>
<td>L & D RELAXLINE<br />Materassi</td>
</tr>
<tr>
<td>09.30</td>
<td>RED LINE<br />Plantari</td>
<td>15.45</td>
<td>PASSIONE ARGAN<br />Olio e creme Argan</td>
</tr>
<tr>
<td>09.45</td>
<td>EVVIVO<br />Panettoni</td>
<td>16.00</td>
<td>NATALE<br />Salse</td>
</tr>
<tr>
<td>10.00</td>
<td>NATALE<br />Benessere corpo</td>
<td>16.15</td>
<td>VERDEVERO<br />Detersivi Biologici</td>
</tr>
<tr>
<td>10.15</td>
<td>AZ. AGR. PRUNOTTO<br />Miele,frutta sciroppata</td>
<td>16.30</td>
<td>FERRARO<br />Bresaola</td>
</tr>
<tr>
<td>10.30</td>
<td>FORNO COLLIVASONE<br />Offelle</td>
<td>16.45</td>
<td>NATALE<br />Gourmet</td>
</tr>
<tr>
<td>10.45</td>
<td>JUVOVITA<br />Integratore alimentare</td>
<td>17.00</td>
<td>MONTECCONE<br />Cioccolato</td>
</tr>
<tr>
<td>11.00</td>
<td>NATALE<br />Pavese</td>
<td>17.15</td>
<td>MONTECCONE<br />Cioccolato</td>
</tr>
<tr>
<td>11.15</td>
<td>PASTICCERIA ZUFFADA<br />Torta di Mandorla</td>
<td>17.30</td>
<td>NATALE<br />Tartufotto</td>
</tr>
<tr>
<td>14.00</td>
<td>SOCIETA' VASAI<br />Pentole in terracotta</td>
<td>17.45</td>
<td>PASTICCERIA BORDONI<br />Panettoni</td>
</tr>
<tr>
<td>14.15</td>
<td>NATALE<br />Selezione liquori</td>
<td>18.00</td>
<td>COSM-ETICA<br />Prodotti igiene personale</td>
</tr>
<tr>
<td>14.30</td>
<td>ZAFFERANO DI ROSSO<br />Zafferano</td>
<td>18.15</td>
<td>NATALE<br />Ligure</td>
</tr>
<tr>
<td>14.45</td>
<td>TENUTA BORGOLANO<br />Vini Oltrepò Pavese</td>
<td>18.30</td>
<td>AMICI PER LA PELLE<br />Cosmesi bava di lumaca</td>
</tr>
<tr>
<td>15.00</td>
<td>TENUTA BORGOLANO<br />Vini Oltrepò Pavese</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="tabContents4" class="tab_content" style="display: none;">
<div class="giovedi">
<h3>Giovedì 27 Novembre 2014</h3>
<br />
<table id="programmi_tv">
<tbody>
<tr><th>Orario</th><th>Azienda</th><th>Orario</th><th>Azienda</th></tr>
<tr>
<td>09.00</td>
<td>NATALE<br />Argan</td>
<td>15.15</td>
<td>OZONOMATIC<br />Creme ossigeno-ozono</td>
</tr>
<tr>
<td>09.15</td>
<td>L & D RELAXLINE<br />Materassi</td>
<td>15.30</td>
<td>NATALE<br />Salumeria</td>
</tr>
<tr>
<td>09.30</td>
<td>CORTE DI BRIGNANO<br />Salame</td>
<td>15.45</td>
<td>GELATO CUBE<br />Gelatiera</td>
</tr>
<tr>
<td>09.45</td>
<td>NATALE<br />Tartufotto</td>
<td>16.00</td>
<td>TORINO GELATO<br />Preparati per gelato</td>
</tr>
<tr>
<td>10.00</td>
<td>BASI ACHILLE<br />Spugne</td>
<td>16.15</td>
<td>NATALE<br />Selezione vini</td>
</tr>
<tr>
<td>10.15</td>
<td>GRAVANAGO<br />Vini Oltrepò</td>
<td>16.30</td>
<td>MAGIC COOKER<br />Friggitrice</td>
</tr>
<tr>
<td>10.30</td>
<td>NATALE<br />Bamboo</td>
<td>16.45</td>
<td>MAGIC COOKER<br />Friggitrice</td>
</tr>
<tr>
<td>10.45</td>
<td>PODERE CAMPRIANO<br />Vino Chianti e mosto</td>
<td>17.00</td>
<td>FORNO COLLIVASONE<br />Offelle</td>
</tr>
<tr>
<td>11.00</td>
<td>PIRLO DOLCI<br />Pirlotti, Pandolce</td>
<td>17.15</td>
<td>AZ. AGRICOLA 2M<br />Lumache</td>
</tr>
<tr>
<td>11.15</td>
<td>EVVIVO<br />Panettoni</td>
<td>17.30</td>
<td>NATALE<br />Gusto</td>
</tr>
<tr>
<td>14.00</td>
<td>NATALE<br />Goloso</td>
<td>17.45</td>
<td>RANISE ALIMENTARE<br />Olio, Olive, Pesto</td>
</tr>
<tr>
<td>14.15</td>
<td>AMICI PER LA PELLE<br />Cosmesi bava di lumaca</td>
<td>18.00</td>
<td>RANISE ALIMENTARE<br />Olio, Olive, Pesto</td>
</tr>
<tr>
<td>14.30</td>
<td>MDD<br />Guanti, crema depilatoria</td>
<td>18.15</td>
<td>ZAFFERANO DI ROSSO<br />Zafferano</td>
</tr>
<tr>
<td>14.45</td>
<td>NATALE<br />Pavese</td>
<td>18.30</td>
<td>NATALE<br />Prelibato</td>
</tr>
<tr>
<td>15.00</td>
<td>VERDEVERO<br />Detersivi Biologici</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="tabContents5" class="tab_content" style="display: none;">
<div class="venerdì">
<h3>Venerdì 28 Novembre 2014</h3>
<br />
<table id="programmi_tv">
<tbody>
<tr><th>Orario</th><th>Azienda</th><th>Orario</th><th>Azienda</th></tr>
<tr>
<td>09.00</td>
<td>BASI ACHILLE<br />Spugne</td>
<td>15.15</td>
<td>SOCIETA' VASAI<br />Pentole in terracotta</td>
</tr>
<tr>
<td>09.15</td>
<td>NATALE<br />Ligure</td>
<td>15.30</td>
<td>SOCIETA' VASAI<br />Pentole in terracotta</td>
</tr>
<tr>
<td>09.30</td>
<td>FERRARO<br />Bresaola</td>
<td>15.45</td>
<td>NATALE<br />Tartufotto</td>
</tr>
<tr>
<td>09.45</td>
<td>BISCOTTIFICIO BELLI<br />Cantucci</td>
<td>16.00</td>
<td>PIRLO DOLCI<br />Pirlotti, Pandolce</td>
</tr>
<tr>
<td>10.00</td>
<td>NATALE<br />Selezione liquori</td>
<td>16.15</td>
<td>SANTA RITA<br />Pastificio</td>
</tr>
<tr>
<td>10.15</td>
<td>MONTECCONE<br />Cioccolato</td>
<td>16.30</td>
<td>CORTE DI BRIGNANO<br />Salame</td>
</tr>
<tr>
<td>10.30</td>
<td>ZAFFERANO DI ROSSO<br />Zafferano</td>
<td>16.45</td>
<td>NATALE<br />Pavese</td>
</tr>
<tr>
<td>10.45</td>
<td>ZAFFERANO DI ROSSO<br />Zafferano</td>
<td>17.00</td>
<td>URSINI<br />Sughi, Olio</td>
</tr>
<tr>
<td>11.00</td>
<td>NATALE<br />Gourmet</td>
<td>17.15</td>
<td>GRAVANAGO<br />Cosmetici al Barbera</td>
</tr>
<tr>
<td>11.15</td>
<td>VERDEVERO<br />Detersivi Biologici</td>
<td>17.30</td>
<td>NATALE<br />Salumeria</td>
</tr>
<tr>
<td>14.00</td>
<td>FABBRICA DEI NOCCIOLINI<br />Biscotti</td>
<td>17.45</td>
<td>KAUAI GIOIELLI<br />Anelli e bracciali</td>
</tr>
<tr>
<td>14.15</td>
<td>NATALE<br />Benessere corpo</td>
<td>18.00</td>
<td>BASI ACHILLE<br />Spugne</td>
</tr>
<tr>
<td>14.30</td>
<td>FORNO COLLIVASONE<br />Offelle</td>
<td>18.15</td>
<td>NATALE<br />Pasta e sughi</td>
</tr>
<tr>
<td>14.45</td>
<td>PASTICCERIA BORDONI<br />Panettoni</td>
<td>18.30</td>
<td>MDD<br />Guanti, crema depilatoria</td>
</tr>
<tr>
<td>15.00</td>
<td>NATALE<br />Salse</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="tabContents6" class="tab_content" style="display: none;">
<div class="sabato">
<h3>Sabato 29 Novembre 2014</h3>
<br />
<table id="programmi_tv">
<tbody>
<tr><th>Orario</th><th>Azienda</th><th>Orario</th><th>Azienda</th></tr>
<tr>
<td>09.00</td>
<td>AMICI PER LA PELLE<br />Cosmesi bava di lumaca</td>
<td>15.15</td>
<td>ZAFFERANO DI ROSSO<br />Zafferano</td>
</tr>
<tr>
<td>09.15</td>
<td>NATALE<br />Salumeria</td>
<td>15.30</td>
<td>NATALE<br />Argan</td>
</tr>
<tr>
<td>09.30</td>
<td>PIRLO DOLCI<br />Pirlotti, Pandolce</td>
<td>15.45</td>
<td>STEVIA'S<br />Dolcificante</td>
</tr>
<tr>
<td>09.45</td>
<td>POLYMED<br />Palestrina</td>
<td>16.00</td>
<td>L & D RELAXLINE<br />Materassi</td>
</tr>
<tr>
<td>10.00</td>
<td>L'ECOLAIO<br />Vasotti</td>
<td>16.15</td>
<td>RANISE ALIMENTARE<br />Olio, Olive, Pesto</td>
</tr>
<tr>
<td>10.15</td>
<td>NATALE<br />Prelibato</td>
<td>16.30</td>
<td>NATALE<br />Bamboo</td>
</tr>
<tr>
<td>10.30</td>
<td>RED LINE<br />Plantari</td>
<td>16.45</td>
<td>PIANETTA di BARBIERI<br />Mostarda</td>
</tr>
<tr>
<td>10.45</td>
<td>SANTA RITA<br />Pastificio</td>
<td>17.00</td>
<td>PIANETTA di BARBIERI<br />Mostarda</td>
</tr>
<tr>
<td>11.00</td>
<td>NATALE<br />Pavese</td>
<td>17.15</td>
<td>STROPPIANA CHOCOLATE<br />Cioccolato</td>
</tr>
<tr>
<td>11.15</td>
<td>CHURROS FAST SWEET<br />Churros</td>
<td>17.30</td>
<td>EVVIVO<br />Panettoni</td>
</tr>
<tr>
<td>14.00</td>
<td>DEDOMENICI<br />Salumi Oltrepò</td>
<td>17.45</td>
<td>NATALE<br />Tartufotto</td>
</tr>
<tr>
<td>14.15</td>
<td>NATALE<br />Gusto</td>
<td>18.00</td>
<td>CORTE DI BRIGNANO<br />Salame</td>
</tr>
<tr>
<td>14.30</td>
<td>BISCOTTIFICIO BELLI<br />Cantucci</td>
<td>18.15</td>
<td>FERRARO<br />Bresaola</td>
</tr>
<tr>
<td>14.45</td>
<td>NATALE<br />Selezione vini</td>
<td>18.30</td>
<td>NATALE<br />Goloso</td>
</tr>
<tr>
<td>15.00</td>
<td>ZAFFERANO DI ROSSO<br />Zafferano</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="tabContents7" class="tab_content" style="display: none;">
<div class="domenica">
<h3>Domenica 30 Novembre 2014</h3>
<br />
<table id="programmi_tv">
<tbody>
<tr><th>Orario</th><th>Azienda</th><th>Orario</th><th>Azienda</th></tr>
<tr>
<td>09.00</td>
<td>NATALE<br />Pasta e sughi</td>
<td>15.15</td>
<td>VERDEVERO<br />Detersivi Biologici</td>
</tr>
<tr>
<td>09.15</td>
<td>SOCIETA' VASAI<br />Pentole in terracotta</td>
<td>15.30</td>
<td>NATALE<br />Tartufotto</td>
</tr>
<tr>
<td>09.30</td>
<td>ZAFFERANO DI ROSSO<br />Zafferano</td>
<td>15.45</td>
<td>SOCIETA' VASAI<br />Pentole in terracotta</td>
</tr>
<tr>
<td>09.45</td>
<td>NATALE<br />Salumeria</td>
<td>16.00</td>
<td>AZ. AGR. PRUNOTTO<br />Miele,frutta sciroppata</td>
</tr>
<tr>
<td>10.00</td>
<td>PASTICCERIA BORDONI<br />Panettoni</td>
<td>16.15</td>
<td>JUVOVITA<br />Integratore alimentare</td>
</tr>
<tr>
<td>10.15</td>
<td>NATALE<br />Salse</td>
<td>16.30</td>
<td>NATALE<br />Gourmet</td>
</tr>
<tr>
<td>10.30</td>
<td>FERRARO<br />Bresaola</td>
<td>16.45</td>
<td>MDD<br />Guanti, crema depilatoria</td>
</tr>
<tr>
<td>10.45</td>
<td>STROPPIANA CHOCOLATE<br />Cioccolato</td>
<td>17.00</td>
<td>SAPORI ANTICHI<br />Pasta colorata</td>
</tr>
<tr>
<td>11.00</td>
<td>Le televendite riprendono<br />alle ore 14.00</td>
<td>17.15</td>
<td>SAPORI ANTICHI<br />Pasta colorata</td>
</tr>
<tr>
<td>11.15</td>
<td>Le televendite riprendono<br />alle ore 14.00</td>
<td>17.30</td>
<td>NATALE<br />Pavese</td>
</tr>
<tr>
<td>14.00</td>
<td>BASI ACHILLE<br />Spugne</td>
<td>17.45</td>
<td>OZONOMATIC<br />Creme ossigeno-ozono</td>
</tr>
<tr>
<td>14.15</td>
<td>NATALE<br />Ligure</td>
<td>18.00</td>
<td>LE CAMPANELLE<br />Confetture e salse</td>
</tr>
<tr>
<td>14.30</td>
<td>AMICI PER LA PELLE<br />Cosmesi bava di lumaca</td>
<td>18.15</td>
<td>PIRLO DOLCI<br />Pirlotti, Pandolce</td>
</tr>
<tr>
<td>14.45</td>
<td>URSINI<br />Sughi, Olio</td>
<td>18.30</td>
<td>NATALE<br />Benessere corpo</td>
</tr>
<tr>
<td>15.00</td>
<td>NATALE<br />Selezione liquori</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
	//  When user clicks on tab, this code will be executed
	$("#tabs li").click(function() {
		//  First remove class "active" from currently active tab
		$("#tabs li").removeClass('active');

		//  Now add class "active" to the selected/clicked tab
		$(this).addClass("active");

		//  Hide all tab content
		$(".tab_content").hide();

		//  Here we get the href value of the selected tab
		var selected_tab = $(this).find("a").attr("href");

		//  Show the selected tab content
		$(selected_tab).fadeIn();

		//  At the end, we add return false so that the click on the link is not executed
		return false;
	});
});

$(document).ready(function(){
var d = new Date();
var n = d.getDay();
$("#tabs li").removeClass('active');
$(".day"+n).addClass('active');
$(".tab_content").hide();
$(".tabContents"+n).show();
})
// ]]></script>
</p>
<h3>PROGRAMMI A DIFFUSIONE NAZIONALE</h3>
<p><br /><br /></p>
<div id="tabs_container">
<ul id="tabs">
<li class="tabContents8"><a href="#tabContents1">Lunedí</a></li>
<li class="tabContents9"><a href="#tabContents2">Martedì</a></li>
<li class="tabContents10"><a href="#tabContents3">Mercoledì</a></li>
<li class="tabContents11"><a href="#tabContents4">Giovedì</a></li>
<li class="tabContents12"><a href="#tabContents5">Venerdì</a></li>
<li class="tabContents13"><a href="#tabContents6">Sabato</a></li>
<li class="tabContents14"><a href="#tabContents7">Domenica</a></li>
</ul>
</div>
<div id="tabs_content_container">
<div id="tabContents8" class="tab_content" style="display: block;">
<div class="lunedi">
<h3 style="text-align: left;">Lunedì 24 Novembre 2014</h3>
<br />
<table id="programmi_tv" border="1">
<tbody>
<tr><th>Orario</th><th>Azienda</th><th>Orario</th><th>Azienda</th></tr>
<tr>
<td>09.00</td>
<td>PASTICCERIA BORDONI<br />Panettoni</td>
<td>20.00</td>
<td>EVVIVO<br />Panettoni</td>
</tr>
<tr>
<td>09.15</td>
<td>NATALE<br />Tartufotto</td>
<td>20.15</td>
<td>FORNO COLLIVASONE<br />Offelle</td>
</tr>
<tr>
<td>09.30</td>
<td>AMICI PER LA PELLE<br />Cosmesi bava di lumaca</td>
<td>20.30</td>
<td>NATALE<br />Salumeria</td>
</tr>
<tr>
<td>09.45</td>
<td>CORTE DI BRIGNANO<br />Salame</td>
<td>20.45</td>
<td>VERDEVERO<br />Detersivi Biologici</td>
</tr>
<tr>
<td>10.00</td>
<td>NATALE<br />Benessere corpo</td>
<td>21.00</td>
<td bgcolor="white"> </td>
</tr>
<tr>
<td>10.15</td>
<td>URSINI<br />Sughi, Olio</td>
<td>21.15</td>
<td> </td>
</tr>
<tr>
<td>10.30</td>
<td>STROPPIANA CHOCOLATE<br />Cioccolato</td>
<td>21.30</td>
<td> </td>
</tr>
<tr>
<td>10.45</td>
<td>ZAFFERANO DI ROSSO<br />Zafferano</td>
<td>21.45</td>
<td> </td>
</tr>
<tr>
<td>11.00</td>
<td>ZAFFERANO DI ROSSO<br />Zafferano</td>
<td>22.00</td>
<td> </td>
</tr>
<tr>
<td>11.15</td>
<td>NATALE<br />Ligure</td>
<td>22.15</td>
<td> </td>
</tr>
<tr>
<td>11.30</td>
<td>OZONOMATIC<br />Creme ossigeno-ozono</td>
<td>22.30</td>
<td> </td>
</tr>
<tr>
<td>11.45</td>
<td>CHURROS FAST SWEET<br />Churros</td>
<td>22.45</td>
<td> </td>
</tr>
<tr>
<td>12.00</td>
<td>AZ. AGR. PRUNOTTO<br />Miele,frutta sciroppata</td>
<td>23.00</td>
<td> </td>
</tr>
<tr>
<td>12.15</td>
<td>NATALE<br />Selezione vini</td>
<td>23.15</td>
<td> </td>
</tr>
<tr>
<td>12.30</td>
<td>RED LINE<br />Plantari</td>
<td>23.30</td>
<td> </td>
</tr>
<tr>
<td>12.45</td>
<td>DEDOMENICI<br />Salumi Oltrepò</td>
<td>23.45</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Le trasmissioni riprendono<br />stasera alle 21</td>
<td> </td>
<td>Le trasmissioni riprendono<br />domani alle 9</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="tabContents9" class="tab_content" style="display: none;">IN ALLESTIMENTO</div>
<div id="tabContents10" class="tab_content" style="display: none;">IN ALLESTIMENTO</div>
<div id="tabContents11" class="tab_content" style="display: none;">IN ALLESTIMENTO</div>
<div id="tabContents12" class="tab_content" style="display: none;">IN ALLESTIMENTO</div>
<div id="tabContents13" class="tab_content" style="display: none;">IN ALLESTIMENTO</div>
<div id="tabContents14" class="tab_content" style="display: none;">IN ALLESTIMENTO</div>
</div>

vekia · November 25, 2014

it's a class

second group also must have tabContents1, 2,3,4 and so on

you can use the same classes, only not the same id elements.

goodshopping.tv · November 25, 2014

Vekia, so sorry but I'm newbie, I didn't understand: can you give me the sample code?

goodshopping.tv · November 25, 2014

vekia, can you give me some suggestion?

vekia · November 26, 2014

your table elements contains contents that you want to display depending on days

remove id="tabContents1", use class="tabContents1"

do the same for:

day1 - class="tabContents1"

day2 - class="tabContents2"

day3 - class="tabContents3"

day4 - class="tabContents4"

day5 - class="tabContents5"

day6 - class="tabContents6"

day7 - class="tabContents7"

goodshopping.tv · November 27, 2014

Vekia, thank you so much for this further help. I'll take care about that: unfortunately the board of the company decided to split the content in two pages and following your previous posts, everything is now okay.

Tabs on a CMS page in PS 1.6

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites