rgtabs Anpassung

Hi,

erst Einmal grosses Lob an Georg, du machst wirklich immer super extensions!

Eine Frage bzw. ein Problem habe ich, dass ich jedoch leider mit meinen sehr geringen Javascript-Kenntnissen nicht alleine hinbekomme.

Ich habe rgtabs so eingefügt, dass Sie rechts oben in meiner Website erscheint(über einem bg-image).
Nun möchte ich erreichen, dass die Wraper für den Content erst sichtbar werden, wenn man auf einen Tab klickt.
Dazu müsste ich ja im CSS die rgtabs-wrapper Klasse mit visibility:hidden versehen und im js beim Aufruf bzw. beim Anzeigen lassen eines Tab visibility:visible mitgeben, sowie fürs weggklicken wieder einen hidden.
(Der Wrapper soll erst wieder verschwinden wenn man wieder wo klickt (ob auf den Pannel selbst oder den Inhalt eines Wrappers). Oder ist das so gar nicht Möglich?)

Jetzt meine Frage an euch, wo muss ich das angeben bzw. welche Änderungen muss ich js vornehmen um das hinzubekommen.

Ich bin Dankbar für jede Hilfe und Hinweise die zur Lösung führen 😉

Liebe Grüsse
Cécile

Hallo,

vielen Dank fürs Lob!

schau dir mal typo3conf/ext/rgtabs/res/scripts/rgtabs.js an und hier die Funktionen onShow + onHide.

Die sollten dich hier weiterbringen

Georg

Hallo Georg,

Danke für deine rasche Antwort.
Die beiden Funktionen habe ich mir vorhin bereits angesehen, leider habe ich zu wenig Ahnung von javascript als, dass ich wüsste was ich tue.

Ausprobiert habe ich darin schon ein bisschen rumprobiert entweder hats mir dann gar kein wraper mehr gezeigt oder nur noch den wraper-content aber keine background des wrapers selbst mehr... 2 Varianten die ich versucht habe:

options: {
		show: 0,
		delay:0,
		entrySelector: '.rgtabs-entry',
		classWrapper: 'rgtabs-wrapper',
		classMenu: 'rgtabs-menu',
		classContainer: 'rgtabs-container',
		onShow: function(toggle, container, index) {
			toggle.addClass('rgtabs-selected');
			var list = $$('.rgtabs-selected a');
			list.each(function(element) {
				element.addClass('sel');
				//Blendet den wraper komplett aus
				element.setStyle('visibility', 'visible');
			});
			container.setStyle('display', '');
			//Blendet den wraper aber nicht den wraper-content aus
			container.setStyle('visibility', 'visible');
			
		},
		onHide: function(toggle, container, index) {
			var list = $$('.rgtabs-selected a');
			list.each(function(element) {
				element.removeClass('sel');
			});
			toggle.removeClass('rgtabs-selected');
			container.setStyle('display', 'none');
		},
		onRequest: function(toggle, container, index) {
			container.addClass('rgtabs-ajax-loading');
		},
		onComplete: function(toggle, container, index) {
			container.removeClass('rgtabs-ajax-loading');
		},
		onFailure: function(toggle, container, index) {
			container.removeClass('rgtabs-ajax-loading');
		},
		getContent: null
	},

im CSS habe ich dabei .rgtabs-wrapper { visibility:hidden;} drin.

Oder habe ich einen komplett Falschen Ansatz?
:o

Eigentlich müsste ich ja das im css Standardmässig ausblenden, bei onShow alles einblenden und bei onHide alles wieder ausblenden, oder?

lg
Cécile