Hallo ihr Lieben,
ich habe folgendes Problem: Ich möchte gerne einen Toggle-slide in einem Accordion machen. Beides sind Klassen von mootools. Soweit funktioniert das Ganze auch (zu sehen unter: Go!Spirit - Repertoire).
Mein Problem ist nun, dass ich den slide gerne von Anfang an ausgeblendet hätte und erst bei einem Klick auf das Lied soll dieser „erscheinen“. Auch das funktioniert mit der .hide() Einstellung. Allerdings wird nicht der Ganze slide geöffnet, sondern immer nur das obere Stück und dann auch leider ohne scrollbar. Lasse ich den Hide weg, ist der toggle ja standardmäßig von Beginn an eingeblendet und oh Wunder, dann wird auch der Ganze angezeigt.
Woran könnte das liegen und wie kann ich es abstellen? Ich habe es schon in der html mit einem height versucht, aber auch das zeigte keine Wirkung.
Hier noch die verschiedenen Codes:
demo.js (zuständig für das Accordion)
PHP-Code:
window.addEvent(‚domready‘, function() {
//create our Accordion instance
var myAccordion = new Accordion($(‚accordion‘), ‚h3.toggler‘, ‚div.element‘, {
display: -1,
opacity: true,
alwaysHide: true,
onActive: function(toggler, element){
toggler.setStyle(‚color‘, ‚#A9020A‘);
},
onBackground: function(toggler, element){
toggler.setStyle(‚color‘, ‚#3B495A‘);
}
});
});
slide.js (zuständig für den Slide Effekt):
PHP-Code:
window.addEvent(‚domready‘, function() {
var status = {
‚true‘: ‚open‘,
‚false‘: ‚close‘
};
//-vertical
var myVerticalSlide = new Fx.Slide(‚vertical_slide‘).hide();
$(‚v_toggle‘).addEvent(‚click‘, function(e){
e.stop();
myVerticalSlide.toggle();
});
});
der zuständige Teil aus der .css-Datei:
Code:
/*FX.Accordion*/
#accordion {
margin:20px 0px;
}
h3.toggler {
cursor: pointer;
border: 0px solid #f5f5f5;
font-family: Verdana, sans-serif;
font-size: 14px;
background: transparent;
color: #3B495A;
margin: 0 0 0 0;
padding: 0px 10px;
}
div.element p, div.element h4 {
margin:0px;
padding:0px 10px;
}
blockquote {
padding:5px 20px;
}
/*FX.Slide*/
h3.section {
margin-top: 0em;
}
#vertical_slide, #horizontal_slide {
background: #transparent;
color: #3B495A;
padding: 0px 10px;
border: 1px solid #8C8C8C;
}
div.marginbottom {
/* Since the Fx.Slide element resets margins, we set a margin on the above element */
margin-bottom: 0px;
}
und schließlich der html-Ausschnitt:
HTML-Code:
A
All because of Jesus / Alles wegen Jesus
Wegen Jesus sind wir heute hier.
Du kamst aus dem Himmel um am Kreuz zu sterben.
Du opfertest dein Leben für jeden von uns.
Und als du wieder auferstandst, errangst du den Sieg.
Wegen Jesus sind wir heute frei.
Wegen Jesus sind wir eine Familie.
Du bist mein Retter, mein Erlöser und mein Freund
und wenn ich falle, hebst du mich auf.
Du hast uns das Himmelstor geöffnet und den Sieg gebracht.
Wegen Jesus sind wir frei.
Im Namen Jesus haben wir den Sieg.
Wir werden mit Jesus in alle Ewigkeit leben.
Glory Halleluja!
Jesus wir loben dich Hallelujah
All because of Jesus (T. Aas)
Amazing Grace
Amen (Jester Hairston)
Angels from the realms of glory (Henry Smart)
A star is shining tonight (T: Eyvind Skeie / M/S: T…
At the cross (M: R.E. Hudson / S: H. Jost)
Aufrecht stehn (M: B. Engel / T: C. Lang)
B
Bewahre uns, Gott (M: A. Ruuth / T: E. Eckert)
Bin überreich beschenkt (M: D.Falk / T: A. Malessa)
Blessed be His name (M: H. Jost / T: R. Wilson)
Bless the Lord (T. Aas)
usw…
Beitrag bearbeiten/löschen