Accordeon (Scriptfehler?)

[update]

Wer's mal probieren möchte, die Dinger auch wieder zu zu klappen (zuzuklappen):
im head

Code: Select all

<script type="text/javascript" src="include/inc_js/scriptaculous/accordion/javascript/prototype.js"></script>
<script type="text/javascript" src="include/inc_js/scriptaculous/accordion/javascript/effects.js"></script>
<script type="text/javascript" src="include/inc_js/scriptaculous/accordion/javascript/accordion.js"></script>
	<script type="text/javascript">
		Event.observe(window, 'load', loadAccordions, false);
		function loadAccordions() {
			var topAccordion = new accordion('vertical_container', {
				classNames : {
					toggle : 'vertical_accordion_toggle',
					toggleActive : 'vertical_accordion_toggle_active',
					content : 'vertical_accordion_content'
				},
				defaultSize : {
				height : null,
				width : null
				},
				direction : 'vertical'
			});
		}
</script>

als template:

Code: Select all

	[FAQ_QUESTION]<h2 id="faq_id{FAQ_ID}" class="vertical_accordion_toggle">{FAQ_QUESTION}</h2>[/FAQ_QUESTION]
	<div class="vertical_accordion_content">
	[FAQ_ANSWER]
		<div class="faqAnswer" id="faqAnswer_id{FAQ_ID}">
			[FAQ_IMAGE]
			<div class="faqImage">
			{FAQ_IMAGE}
			[FAQ_CAPTION]
				<div class="faqCaption">
				{FAQ_CAPTION}
				</div>
			[/FAQ_CAPTION]
			</div>
			[/FAQ_IMAGE]
		</div>
	{FAQ_ANSWER}
	[/FAQ_ANSWER]
	</div>

als css

Code: Select all

		/*Vertical Accordions*/
		
		.accordion_toggle {
			display: block;
			height: 30px;
			width: 100%;
			background: url(images/accordion_toggle.jpg) no-repeat top right #a9d06a;
			padding: 0 1em 0 1em;
			line-height: 30px;
			color: #ffffff;
			font-weight: normal;
			text-decoration: none;
			outline: none;
			font-size: 1em;
			color: #000000;
			border-bottom: 1px solid #cde99f;
			cursor: pointer;
			margin: 0 0 0 0;
		}
		
		.accordion_toggle_active {
			background: #ff0000;
			color: #ffffff;
			border-bottom: 1px solid #f68263;
		}
		
		.accordion_content {
			background-color: #ffffff;
			color: #444444;
			overflow: hidden;
		}
			
		.accordion_content h2 {
			margin: 1.5em 0 0.5em 1em;
			color: #0099FF;
		}
			
		.accordion_content p {
			line-height: 150%;
			padding: 0.5em 1em 1.5em 0.5em;
		}
		.accordion_content img {
			line-height: 150%;
			padding: 0.2em 0.5em 0.5em 0.5em;
		}
			
		.vertical_accordion_toggle {
			display: block;
			height: 1.5em;
			width: 100%;
			background: #f8f8f8;
			padding: 0 1em 0 1em;
			line-height: 1.5em;
			color: #ffffff;
			font-weight: normal;
			text-decoration: none;
			outline: none;
			font-size: 1em;
			color: #000000;
			border-top: 1px solid #dddddd;
			border-left: 1px solid #dddddd;
			border-bottom: 1px solid #ff0000;
			border-right: 1px solid #ff0000;
			cursor: pointer;
			margin: 0 0 0.5em 0;
		}

		.vertical_accordion_toggle_active {
			background: #ff0000;
			color: #ffffff;
			border-bottom: 1px solid #666666;
			font-weight:bold;
		}

		.vertical_accordion_content {
			background-color: #ffffff;
			color: #444444;
			overflow: hidden;
		}

		.vertical_accordion_content h2 {
			margin: 1.5em 0 0.5em 1em;
			color: #0099FF;
		}

		.vertical_accordion_content p {
			line-height: 150%;
			padding: 0.5em 1em 1.5em 0.5em;
		}
		.vertical_accordion_content img {
			line-height: 150%;
			padding: 0.2em 0.5em 0.5em 0.5em;
		}
  			
		/* Container styling*/
		#horizontal_container {
			margin: 2em auto 2em auto;
			width: 100%;   
			height: 100px;    
		}
    
		#vertical_nested_container {
			margin: 2em auto 2em auto;
			width: 100%;
		}

Habe im Übrigen auch den ganzen Sonntag verdaddelt mit dem Ding. Einziges Manko: gibt irgendwie einen nicht auffindbaren Warnhinweis auf "Size" - nicht zu finden:
Warning: Error in parsing value for property 'size'. Declaration dropped.
Source File: http://www.stickmanlabs.com/accordion/
Line: 0 (also nirgends, hmm vielleicht findet ja jemand anderes da was
Viel Vergnügen

Achso - vergessen:
Einen CUSTOM BLOCK mit dem Inhalt

Code: Select all

<div id="vertical_container">{FAQ}</div>

und {FAQ} plaziert im Bereich, wo auch {CONTENT} ist (zB darunter, meinetwegen auch in der linken Spalte oder...)

[update]

Und mit mootools (kleiner Tipp von Breitsch )
really simple:

Code: Select all

<script src="template/inc_js/mootools/mootools.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[	
   window.addEvent('domready', function(){
      var accordion = new Accordion('h3.atStart', 'div.atStart', {
         opacity: false, duration: 1000, alwaysHide: true,
         onActive: function(toggler, element){
            toggler.setStyle('color', '#ff3300');
         },
         onBackground: function(toggler, element){
            toggler.setStyle('color', '#222');
         }
      }, $('accordion'));
   });
// ]]>
</script>

Das alwaysHide: true, macht, dass die Dinger geschlossen starten (das erste ist offen) und jeweils mit Klick auf- und zugemacht werden können - lässt sich jetzt ausbauen.

Natürlich Template usw entsprechend der superDiskussion hier anpassen usw...
Achso: und als Bonus: völlig ohne warnings/errors!

[markus s]

sehr gut !
ich möchte jetzt nur einen artikel mit toggle auf und zu machen.
und der artikel soll geschlossen sein, beim seitenaufruf.
wie günge dies ?

[breitsch]

accordion.showThisHideOpen(); //no open element on load
accordion.showThisHideOpen(0); //opens the first element on load
accordion.showThisHideOpen(1); //opens the second element on load

[markus s]

wie - wo einsetzen ? ich raffs nicht...

[breitsch]

<script src="template/inc_js/mootools/mootools.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
window.addEvent('domready', function(){
var accordion = new Accordion('h3.atStart', 'div.atStart', {
opacity: false, duration: 1000, alwaysHide: true,
onActive: function(toggler, element){
toggler.setStyle('color', '#ff3300');
},
onBackground: function(toggler, element){
toggler.setStyle('color', '#222');
}
}, $('accordion'));
accordion.showThisHideOpen(); //no open element on load
});
// ]]>
</script>

Der Witz ist bloss, dass dies scheinbar nicht mehr mit 'alwaysHide: true' zusammen geht, ging mit scriptacolus noch aber mit mootools 2 scheint das nicht zu funken.
Keine Ahnung warum.

[markus s]

habe den code um ein "show: 0," ergänzt und sieh da...
menu bleibt bei start geschlossen...

Code: Select all

<script src="template/inc_js/mootools/mootools.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
window.addEvent('domready', function(){
var accordion = new Accordion('h3.atStart', 'div.atStart', {
opacity: false, duration: 1000, alwaysHide: true,
show: 0,
onActive: function(toggler, element){
toggler.setStyle('color', '#ff3300');
},
onBackground: function(toggler, element){
toggler.setStyle('color', '#222');
}
}, $('accordion'));
accordion.showThisHideOpen(); //no open element on load
});
// ]]>
</script>

[Jensensen]

[x]

[markus s]

wo hastn das ausgegraben?

steht alles in den mootools anleitungen... jetzt in der vers.2.0 noch einfacher ...
aber man muss sich enlesen

[update]

Ergänzung ...ist eingebaut und funktioniert!

[godmd]

Hallo Ihr! Ich hatte jetzt nicht so die Zeit, euren Thread laufend zu verfolgen oder nachzuvollziehen, will das Ganze aber dann gerafft und übersichtlich in die FAQ's stellen.

Was ist denn nu der Unterschied zwischen dem Muuhhh-Akkordeon und dem von Scriptaculous? Ihr seid offenbar bei Mootools geblieben, obwohl Scriptabulous das Ganze horizontal und vertikal und in Verschachtelung bietet? Warum?

Anka

[update]

it's going to be mootaculous - perhaps some day?

[markus s]

mootools sind an board.
mit dem obigen script, kann man den accordeon effekt leicht einfügen.
der accordeon links rechts geht auch mit den mootools.
siehe hier

[godmd]

Well and now I wanted to combine the accordion and GaleriX (integrate on one and the same page), but it seems the scripts don't like each other ...

[juergen]

but it seems the scripts don't like each other ...

They hate each other blocking themselves .. same situation when the blog wants to blog comments, they are blocked