Accordion mit nur einem Inhaltselement beim Seitenaufruf immer geschlossen halten

**charlie_2011** · 25.12.2011, 15:21

Hallo,

habe mir einen Artikel gebaut mit 2 Textelementen und einem Text als Accordion. Nun möchte ich gerne, dass das Accordion immer geschlossen - bleibt bis zum Klick auf den "Weiterlesen" Link. Habe nun schon verschiedenes ausprobiert. Auch Anpassungen am Template haben nichts gebracht. Hat mir jemand da vielleicht einen Tipp?

Gruß Charlie

**manfred** · 25.12.2011, 15:31

Hast Du das schon gelesen?

http://www.contao.glen-langer.de/Akk...ul_Closed.html

Gruß Manfred

**maja340** · 25.12.2011, 19:45

Ich habe am Original Template und auchim Backend kopiert und "display:false" hinzugefügt; geht aber immer noch nicht.
Ich bin diese Woche um gestiegen von contao 2.9.5 auf 2.10.3; kann es vielleicht daran liegen.

Liebe Grüße & tolle Tage noch

Gisela Maja
maja340@gmail.com

**psren** · 05.01.2012, 08:22

leere mal bei Systemwartungen

system/html
system/scripts
system/tmp

Bei mir lag es daran :-D

**charlie_2011** · 11.01.2012, 15:50

Hallo,

habe es mit dem Template versucht und auch in der Systemwartung die Daten bereinigt. Funzt leider nicht.

Hat vielleicht noch jemand einen Tipp?

Gruß Charlie

***xchs*** · 11.01.2012, 21:36

Hast Du das neue MooTools-Template auch im (Standard)Seitenlayout aktiviert? Existiert der Code Deines Templates im Quelltext der HTML-Seite?

**charlie_2011** · 12.01.2012, 07:20

Hallo,

vielen Dank für die super schnelle Reaktion.

Im Seitenquelltext steht folgender Eintrag:

HTML-Code:

<div class="ce_accordion block">

<div class="toggler">
Weiterlesen ... 
</div>

<div class="accordion"><div>

Mit 173 luxuriösen Zimmern und exklusiven Suiten, einer herausragenden Gastronomie, einem einzigartigen Spa-Bereich auf 4.000 Quadratmetern mit einem facettenreichen Angebot, sowie grosszügigen Bankett- und Seminarräumlichkeiten bietet das Dolder Grand alle Sparten des Hochgenusses und Wohlergehens auf absolutem Spitzenniveau. Der weltbekannte britische Architekt <em>Lord Norman Foster</em>erweiterte den historischen Hauptbau von 1899 – das ehemalige „Curhaus“ – beidseitig mit neuen, eleganten Flügelbauten und schuf im Sockelbereich eine fantastische Spa-Ebene. Die zwei modernen Flügel, Spa Wing und Golf Wing, schmiegen sich in ihrer organischen Architekturkomposition harmonisch an das vollständig restaurierte Hauptgebäude. Die geschaffenen Wohnwelten der Innenarchitekten United Designers aus London kombinieren das eklektisch-historisierende Ambiente des Haupthauses mit dem modernen Esprit der klaren Linien in den neuen Gebäudeflügeln.
</div></div>

Im Standardseitenlayout ist moo_accordion_closed-neu aktiviert.

Gruß Charlie

***xchs*** · 12.01.2012, 20:31

Zitat von charlie_2011

Im Seitenquelltext steht folgender Eintrag:

HTML-Code:

<div class="ce_accordion block">

<div class="toggler">
Weiterlesen ... 
</div>

<div class="accordion"><div>

Nein, dieses Markup des Akkordeons war nicht gemeint, vielmehr der Code aus Deinem (geänderten) Template "moo_accordion_closed-neu", welcher im Seitenquelltext irgendwo am Seitenende vorhanden sein sollte.

Oftmals gibt es aber auch noch andere JavaScript-Fehler (in der Konsole), die dann in die Ausführung und Verarbeitung anderer Skripte hineinspielen.

Auf einer Live-Seite würde man solcherart Probleme möglicherweise schneller finden.

**charlie_2011** · 13.01.2012, 08:44

Hallo xchs,

sorry. Falsch verstanden. Anbei der Bereich aus dem Quelltext, sowie der Link zur betroffenen Seite.

HTML-Code:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
	new Accordion($$('div.toggler'), $$('div.accordion'), 
	{
		display: false,
		alwaysHide: true,
		opacity: false,

		onActive: function(toggler, i)
		{
			toggler.getFirst() ? toggler.getFirst().setStyle('color', '#000000') : toggler.setStyle('color', '#000000');
		},

		onBackground: function(toggler, i)
		{
			toggler.getFirst() ? toggler.getFirst().setStyle('color', '#a84204') : toggler.setStyle('color', '#a84204');
		}
	});
});
//--><!]]>
</script>


<script>
new Request({
  url:'system/html/cron.txt',
  onComplete: function(txt) {
    if (!txt) txt = 0;
    if (parseInt(txt) < (Date.now()/1000 - 300)) {
      new Request({url:'cron.php'}).get();
    }
  }
}).get();
</script>

http://bp.de.dedi2259.your-server.de...and-kopie.html

***xchs*** · 13.01.2012, 21:02

Na bitte, auf einer Live-Seite sieht man auch gleich das Problem: Du hast am Seitenende zusätzlich zu Deinem oben geposteten Code auch noch das folgende <script>-Element eingebunden:

HTML-Code:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
	new Accordion($$('div.toggler'), $$('div.accordion'),
	{
		opacity: false
	});
});
//--><!]]>
</script>

Keine Ahnung, wo das herkommt: Steht das bei Dir nun in Deinem Accordion-Template oder gar direkt im "Seitenlayout" im Feld "Eigener JavaScript-Code", auf jeden Fall solltest Du diesen Skript-Block entfernen. Dann nämlich funktioniert auch Dein oben geposteter Code für das Akkordeon.

BTW: Anstelle von display: false müsste man eigentlich korrekterweise display: -1 schreiben (siehe dazu die Klassenreferenz des MooTools-Frameworks)

**charlie_2011** · 13.01.2012, 22:03

Hallo xchs,

viiiiiellen Dank für den Tipp. Habe meine drei Templates sowie die Seitenlayouts durchforstet. Leider konnte ich da nichts finden. Gibt es noch andere Stellen wo ich suchen kann?

Gruß Charlie

***xchs*** · 13.01.2012, 22:11

Steht es vielleicht direkt im Seitentemplate "fe_*.*"? Dann allerdings nur, wenn Du ein eigenes angepasstes Seitentemplate verwendest.

Ich würde aber fast annehmen, dass das irgendwo in Deinen Templates "moo_*.*" stehen müsste und - dem Seitenquelltext nach - höchstwahrscheinlich im Template "moo_accordion_closed-neu". Wieviele Templates bindest Du denn im "Seitenlayout" im Bereich der "MooTools-Templates" ein? Dort dürfte bei Dir eigentlich nur "moo_mediabox" und "moo_accordion_closed-neu" aktiviert sein.

**charlie_2011** · 13.01.2012, 22:24

Hallo xchs,

habs gefunden. Beim Seitenlayout war noch das MooTools-Template "moo_default" aktiviert. Jetzt funzt es. HIP HIP HURRA.

Herzlichen Dank!!!

Gruß Charlie

***xchs*** · 13.01.2012, 22:32

Hmm... es funktioniert jetzt zwar, allerdings bindest Du nun den Skript-Code für das Akkordeon doppelt ein:

HTML-Code:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
	new Accordion($$('div.toggler'), $$('div.accordion'), 
	{
		display: false,
		alwaysHide: true,
		opacity: false,

		onActive: function(toggler, i)
		{
			toggler.getFirst() ? toggler.getFirst().setStyle('color', '#000000') : toggler.setStyle('color', '#000000');
		},

		onBackground: function(toggler, i)
		{
			toggler.getFirst() ? toggler.getFirst().setStyle('color', '#a84204') : toggler.setStyle('color', '#a84204');
		}
	});
});
//--><!]]>
</script>

<script type="text/javascript">
/* <![CDATA[ */
window.addEvent('domready', function() {
  new Accordion($$('div.toggler'), $$('div.accordion'), {
    display: -1,
    opacity: false,
    alwaysHide: true,
    onActive: function(toggler, elem) {
      elem.setProperty('aria-hidden', 'false');
      toggler.addClass('active');
      toggler.getNext('div').setStyle('visibility', 'visible').fade('in');
      toggler.setProperty('aria-expanded', 'true');
      return false;
    },
    onBackground: function(toggler, elem) {
      elem.setProperty('aria-hidden', 'true');
      toggler.removeClass('active');
      toggler.getNext('div').fade('out').setStyle('visibility', 'hidden');
      toggler.setProperty('aria-expanded', 'false');
      return false;
    }
  });
  $$('div.toggler').each(function(elem) {
    elem.setProperty('role', 'tab');
    elem.setProperty('tabindex', 0);
    elem.addEvents({
      'keypress': function(event) {
        if (event.code == 13) {
          this.fireEvent('click');
        }
      },
      'focus': function() {
        this.addClass('hover');
      },
      'blur': function() {
        this.removeClass('hover');
      },
      'mouseenter': function() {
        this.addClass('hover');
      },
      'mouseleave': function() {
        this.removeClass('hover');
      }
    });
  });
  $$('div.ce_accordion').each(function(elem) {
    elem.setProperty('role', 'tablist');
  });
  $$('div.accordion').each(function(elem) {
    elem.setProperty('role', 'tabpanel');
  });
});
/* ]]> */
</script>

Das erste Skript-Element bräuchtest Du nicht. Letzteres ist der Code aus dem Standard-Template von Contao, angepasst und ergänzt um den display: -1 Parameter.

**charlie_2011** · 16.01.2012, 08:44

Hallo xchs,

vielen Dank für den Hinweis. Kann man irgendwie herausfinden. Woher das kommt? In den Templates ist nichts drin. Und einbinden zu ich nur:

moo_mediabox
moo_modify_foreground
moo_jquery_nc
moo_accordion_closed-neu

Gruß Charlie

**maja340** · 16.01.2012, 09:11

Hallo ihr beiden,

danke für die wertvollen Tipps, bei mir klappt es nun auch; ich habe ebenfalls display: -1 gesetzt;

mfg

Gisela

**charlie_2011** · 16.01.2012, 10:12

Problem gelöst.

Im Moo-Template " moo_modify_foreground" stand das drin. Jetzt ist der doppelte Eintrag in den Quellen weg.

Vielen Dank nochmal für die tolle Hilfe!!!

Gruß Charlie