Hallo, ich habe hier einen Akkordion code. Der funktioniert soweit gut. leider habe ich keine Möglichkeit gefunden, die Schriftgröße des aufgeklappten Textes zu ändern. Kann jemand helfen? Vielen Dank
<!DOCTYPE html>
<html>
<head>
<style>
button.accordion {
background-color: #eee;
color: #404040;
cursor: pointer;
padding: 16px;
font-family:lato, sans-serif;
font-weight:bold;
width: 120%;
border: none;
text-align: left;
outline: none;
font-size: 12px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
button.accordion:after {
content: '\002B';
color: #777;
font-family:calibri, sans-serif;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding-left: 16px;
padding-rigth: 16px;
padding-top: 4px;
padding-bottom: 4px;
color: #404040;
font-family:calibri, sans-serif;
width: 145%;
background-color: white;
border-color: white;
border-width: 2px;
border-style: solid;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
}
</style>
</head>
<body>
<button class="accordion">1. erstellen</button>
<div class="panel">
<p>Die Elcore 2400 ist eine hocheffiziente Brennstoffzelle, die neben der Bereitstellung von Wärme, für Brauchwasser und Heizung, auch elektrische Energie erzeugt. Dadurch reduziert das Gerät die jährlichen Stromkosten um 50 – 70 % - je nach individuellem Verbrauchsprofil. Speziell bei einem Neubau sind geltende Gesetze hinsichtlich umweltgerechten Bauens zu erfüllen. Da die Elcore 2400 die gesetzlichen Anforderungen erfüllt und als hocheffizientes Kraft-Wärme-Kopplungs-Gerät eingestuft wird, ist sie eine einfache und kostengünstige Lösung.</p>
</div>
<button class="accordion">2. Wie trägt das Gerät zum Umweltschutz bei?</button>
<div class="panel">
<p>Durch das Prinzip der Kraft-Wärme-Kopplung wird 40 % weniger Primärenergie aufgewendet als bei einer konventioneller Strom- bzw. Wärmeerzeugung. Die CO2-Emissionen reduzieren sich in gleicher Größenordnung. Da die Hausenergieversorgung noch vor Verkehr und Industrie den größten Teil der C02-Emissionen in Europa verursacht, ist dies von großer Bedeutung.
</p>
</div>
<button class="accordion">3. Wie viele Stunden am Tag läuft die Elcore 2400?</button>
<div class="panel">
<p>Im Normalfall läuft die Elcore 2400 rund um die Uhr. Der erzeugte Strom und die entstehende Wärme werden im Haus verbraucht und überschüssige Wärme lässt sich in einem Wärmepufferspeicher zwischenspeichern. Sie schaltet nur dann ab, wenn der Wärmepufferspeicher voll ist und keine Wärme mehr abgenommen wird.</p>
</div>
<button class="accordion">4. Wie laut ist das Gerät?</button>
<div class="panel">
<p>Da im Gerät keine Verbrennung stattfindet und auch kein Motor (wie in anderen KWK Geräten) verwendet wird, arbeitet das Gerät geräuscharm.</p>
</div>
<button class="accordion">5. Wie groß ist die elektrische Leistung?</button>
<div class="panel">
<p>Die Elcore 2400 erzeugt stetig 305W. Diese werden typischerweise, in einem 4-Personen-Haushalt rund um die Uhr benötigt und verbraucht. Dadurch wird eine sehr hohe Eigenverbrauchsquote und die größte Stromkosteneinsparung erzielt. Wird kurzfristig mehr Strom benötigt, wird dieser vom Stromnetz bezogen.</p>
</div>
<button class="accordion">6. Wie viel Geld kann ich einsparen?</button>
<div class="panel">
<p>Mit der Elcore 2400 können Sie einen großen Teil des benötigten Stroms selbst erzeugen. Dadurch ist eine Senkung Ihrer Stromkosten um 50 % - 70% möglich, abhängig von Ihrem individuellen Verbrauchsprofil. Durch die steigenden Stromkosten sparen Sie von Jahr zu Jahr immer mehr Geld ein.</p>
</div>
<button class="accordion">7. Warum ist die Elcore 2400 die bessere Option? </button>
<div class="panel">
<p>Die Elcore 2400 kann in fast jedem Haus mit Erdgasanschluss installiert werden. Sie ist wesentlich kompakter als andere KWK Geräte, einfacher zu integrieren und wird an der Wand montiert. Sie arbeitet geräuscharm und vibrationsfrei. Durch ihre Auslegung ermöglicht das Gerät eine maximierte Eigenverbrauchsquote am erzeugten Strom und erzielt damit im Vergleich zu anderen KWK Geräten eine besonders hohe Wirtschaftlichkeit. Dabei entlastet die Elcore 2400 die Stromnetze.</p>
</div>
<button class="accordion">8. Was passiert mit überschüssiger elektrischer Energie?</button>
<div class="panel">
<p>Überschüssiger Strom kann ins Netz eingespeist und vergütet werden. Allerdings ist die Einspeisung gegenüber dem Eigenverbrauch wirtschaftlich weniger interessant. Eine Einspeise-Erlaubnis können Sie einfach bei Ihrem Energieversorger beantragen. Ansonsten sind Speichermöglichkeiten, basierend auf bewährten Batterietechnologien, auf dem Markt verfügbar. Bitte wenden Sie sich dafür an einen Speicheranbieter.</p>
</div>
<button class="accordion">9. Facebook</button>
<div class="panel">
<p>Die Gegenrechnung der Einspeisung auf einer Phase mit den Verbrauch auf drei Phasen, findet im vorhandenen Stromzähler im Haus statt. Dadurch nutzen Sie immer die 305 W, unabhängig davon welche Phase zur Einspeisung verwendet wird. Die Einspeisung und Verbräuche werden auf allen 3 Phasen im vorhanden Stromzähler im Hausanschlusskasten summiert.</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc.onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
</script>
</body>
</html>
Akkordion Code
Antworten zu Akkordion Code:
Hat dir diese Antwort geholfen?
Hallo, bei mir funktionierte der Code im Chrome leider nicht, fehlt da noch etwas? Ausklappen war nicht möglich.
So kann ich es leider nicht testen und muss raten:
Du solltest die Größe, Farbe, Formatierung oben im Bereich "panel" anpassen können, ich habe hier die Schriftgröße mal auf 10px reduziert und den Text auf "normal" statt "bold" gesetzt:
Code: [Auswählen]
div.panel {
padding-left: 16px;
padding-rigth: 16px;
padding-top: 4px;
padding-bottom: 4px;
color: #404040;
font-family:calibri, sans-serif;
font-size:10px;
font-weight:normal;
width: 145%;
background-color: white;
border-color: white;
border-width: 2px;
border-style: solid;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
}
Klappt das?
Hat dir diese Antwort geholfen?
Hat nicht funktioniert. Es muss eine andere Ursache haben. So war es drin:
<!DOCTYPE html>
<html>
<head>
<style>
button.accordion {
background-color: #eee;
color: #404040;
cursor: pointer;
padding: 16px;
font-family:lato, sans-serif;
font-weight:bold;
width: 120%;
border: none;
text-align: left;
outline: none;
font-size: 12px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
button.accordion:after {
content: '\002B';
color: #777;
font-family:calibri, sans-serif;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding-left: 16px;
padding-rigth: 16px;
padding-top: 4px;
padding-bottom: 4px;
color: #404040;
font-family:lato, sans-serif;
font-size: 12px;
width: 145%;
background-color: white;
border-color: white;
border-width: 2px;
border-style: solid;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
}
</style>
</head>
<body>
<button class="accordion">1. erstellen</button>
<div class="panel">
<p>Die Elcore 2400 ist eine hocheffiziente Brennstoffzelle, die neben der Bereitstellung von Wärme, für Brauchwasser und Heizung, auch elektrische Energie erzeugt. Dadurch reduziert das Gerät die jährlichen Stromkosten um 50 – 70 % - je nach individuellem Verbrauchsprofil. Speziell bei einem Neubau sind geltende Gesetze hinsichtlich umweltgerechten Bauens zu erfüllen. Da die Elcore 2400 die gesetzlichen Anforderungen erfüllt und als hocheffizientes Kraft-Wärme-Kopplungs-Gerät eingestuft wird, ist sie eine einfache und kostengünstige Lösung.</p>
</div>
<button class="accordion">2. Wie trägt das Gerät zum Umweltschutz bei?</button>
<div class="panel">
<p>Durch das Prinzip der Kraft-Wärme-Kopplung wird 40 % weniger Primärenergie aufgewendet als bei einer konventioneller Strom- bzw. Wärmeerzeugung. Die CO2-Emissionen reduzieren sich in gleicher Größenordnung. Da die Hausenergieversorgung noch vor Verkehr und Industrie den größten Teil der C02-Emissionen in Europa verursacht, ist dies von großer Bedeutung.
</p>
</div>
<button class="accordion">3. Wie viele Stunden am Tag läuft die Elcore 2400?</button>
<div class="panel">
<p>Im Normalfall läuft die Elcore 2400 rund um die Uhr. Der erzeugte Strom und die entstehende Wärme werden im Haus verbraucht und überschüssige Wärme lässt sich in einem Wärmepufferspeicher zwischenspeichern. Sie schaltet nur dann ab, wenn der Wärmepufferspeicher voll ist und keine Wärme mehr abgenommen wird.</p>
</div>
<button class="accordion">4. Wie laut ist das Gerät?</button>
<div class="panel">
<p>Da im Gerät keine Verbrennung stattfindet und auch kein Motor (wie in anderen KWK Geräten) verwendet wird, arbeitet das Gerät geräuscharm.</p>
</div>
<button class="accordion">5. Wie groß ist die elektrische Leistung?</button>
<div class="panel">
<p>Die Elcore 2400 erzeugt stetig 305W. Diese werden typischerweise, in einem 4-Personen-Haushalt rund um die Uhr benötigt und verbraucht. Dadurch wird eine sehr hohe Eigenverbrauchsquote und die größte Stromkosteneinsparung erzielt. Wird kurzfristig mehr Strom benötigt, wird dieser vom Stromnetz bezogen.</p>
</div>
<button class="accordion">6. Wie viel Geld kann ich einsparen?</button>
<div class="panel">
<p>Mit der Elcore 2400 können Sie einen großen Teil des benötigten Stroms selbst erzeugen. Dadurch ist eine Senkung Ihrer Stromkosten um 50 % - 70% möglich, abhängig von Ihrem individuellen Verbrauchsprofil. Durch die steigenden Stromkosten sparen Sie von Jahr zu Jahr immer mehr Geld ein.</p>
</div>
<button class="accordion">7. Warum ist die Elcore 2400 die bessere Option? </button>
<div class="panel">
<p>Die Elcore 2400 kann in fast jedem Haus mit Erdgasanschluss installiert werden. Sie ist wesentlich kompakter als andere KWK Geräte, einfacher zu integrieren und wird an der Wand montiert. Sie arbeitet geräuscharm und vibrationsfrei. Durch ihre Auslegung ermöglicht das Gerät eine maximierte Eigenverbrauchsquote am erzeugten Strom und erzielt damit im Vergleich zu anderen KWK Geräten eine besonders hohe Wirtschaftlichkeit. Dabei entlastet die Elcore 2400 die Stromnetze.</p>
</div>
<button class="accordion">8. Was passiert mit überschüssiger elektrischer Energie?</button>
<div class="panel">
<p>Überschüssiger Strom kann ins Netz eingespeist und vergütet werden. Allerdings ist die Einspeisung gegenüber dem Eigenverbrauch wirtschaftlich weniger interessant. Eine Einspeise-Erlaubnis können Sie einfach bei Ihrem Energieversorger beantragen. Ansonsten sind Speichermöglichkeiten, basierend auf bewährten Batterietechnologien, auf dem Markt verfügbar. Bitte wenden Sie sich dafür an einen Speicheranbieter.</p>
</div>
<button class="accordion">9. Facebook</button>
<div class="panel">
<p>Die Gegenrechnung der Einspeisung auf einer Phase mit den Verbrauch auf drei Phasen, findet im vorhandenen Stromzähler im Haus statt. Dadurch nutzen Sie immer die 305 W, unabhängig davon welche Phase zur Einspeisung verwendet wird. Die Einspeisung und Verbräuche werden auf allen 3 Phasen im vorhanden Stromzähler im Hausanschlusskasten summiert.</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc.onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
</script>
</body>
| « Bootreihenfolge ändern/zeigt nur Win7 an | Installationsprobleme bei WIN 10 Installation auf XP Rechner » | ||
Schnelle Hilfe: Hier nach ähnlichen Fragen und passenden Tipps suchen!
