beispiel_fuer_info-brief

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
beispiel_fuer_info-brief [2025/10/01 15:06] – till-niels.gades@bbz-rd-eck.debeispiel_fuer_info-brief [2025/10/02 13:00] (aktuell) – dennis.clausen@bbz-rd-eck.de
Zeile 1: Zeile 1:
 +====== BBZ Info-Briefe ======
 +
 <html> <html>
 <html lang="de"> <html lang="de">
Zeile 27: Zeile 29:
  
         .brief-content {         .brief-content {
-            padding: 15px;+            padding: 10px 15px;
             display: none; /* Anfangszustand: versteckt */             display: none; /* Anfangszustand: versteckt */
 +        }
 +
 +        .section {
 +            margin-top: 10px;
         }         }
  
Zeile 34: Zeile 40:
             font-size: 18px;             font-size: 18px;
             font-weight: bold;             font-weight: bold;
-            margin-top: 20px;+            margin-top: 10px; 
 +            cursor: pointer; 
 +            color: #444; 
 +        } 
 + 
 +        .section-content { 
 +            display: none; 
 +            margin-left: 15px; 
 +            margin-top: 5px;
         }         }
  
Zeile 48: Zeile 62:
 </head> </head>
 <body> <body>
- 
-    <div class="section-title">Informationen der Schulleitung</div> 
  
     <div class="brief">     <div class="brief">
Zeile 55: Zeile 67:
         <div class="brief-content">         <div class="brief-content">
             <div class="section">             <div class="section">
-                <div class="text-box">+                <div class="section-title" onclick="toggleSection(this)">Informationen der Schulleitung ▼</div> 
 +                <div class="section-content" style="display: block;"> 
 +                    <div class="text-box">
 Text  Text  Text  Text  Text  Text<br> Text  Text  Text  Text  Text  Text<br>
 Text  Text  Text  Text  Text  Text<br> Text  Text  Text  Text  Text  Text<br>
 Text  Text  Text  Text  Text  Text Text  Text  Text  Text  Text  Text
 +                    </div>
                 </div>                 </div>
             </div>             </div>
  
             <div class="section">             <div class="section">
-                <div class="section-title">Informationen über Aktivitäten des Kollegiums</div> +                <div class="section-title" onclick="toggleSection(this)">Informationen über Aktivitäten des Kollegiums ▼</div> 
-                <div class="text-box">+                <div class="section-content"> 
 +                    <div class="text-box">
 Text  Text  Text  Text  Text  Text<br> Text  Text  Text  Text  Text  Text<br>
 Text  Text  Text  Text  Text  Text<br> Text  Text  Text  Text  Text  Text<br>
 Text  Text  Text  Text  Text  Text Text  Text  Text  Text  Text  Text
 +                    </div>
                 </div>                 </div>
             </div>             </div>
Zeile 77: Zeile 94:
         <div class="brief-content">         <div class="brief-content">
             <div class="section">             <div class="section">
-                <div class="section-title">Informationen der Schulleitung</div> +                <div class="section-title" onclick="toggleSection(this)">Informationen der Schulleitung ▼</div> 
-                <div class="text-box">+                <div class="section-content" style="display: block;"> 
 +                    <div class="text-box">
 Text  Text  Text  Text  Text  Text<br> Text  Text  Text  Text  Text  Text<br>
 Text  Text  Text  Text  Text  Text<br> Text  Text  Text  Text  Text  Text<br>
 Text  Text  Text  Text  Text  Text Text  Text  Text  Text  Text  Text
 +                    </div>
                 </div>                 </div>
             </div>             </div>
  
             <div class="section">             <div class="section">
-                <div class="section-title">Informationen über Aktivitäten des Kollegiums</div> +                <div class="section-title" onclick="toggleSection(this)">Informationen über Aktivitäten des Kollegiums ▼</div> 
-                <div class="text-box">+                <div class="section-content"> 
 +                    <div class="text-box">
 Text  Text  Text  Text  Text  Text<br> Text  Text  Text  Text  Text  Text<br>
 Text  Text  Text  Text  Text  Text<br> Text  Text  Text  Text  Text  Text<br>
 Text  Text  Text  Text  Text  Text Text  Text  Text  Text  Text  Text
 +                    </div>
                 </div>                 </div>
             </div>             </div>
Zeile 102: Zeile 123:
  
             content.style.display = isVisible ? 'none' : 'block';             content.style.display = isVisible ? 'none' : 'block';
 +            element.textContent = element.textContent.replace(isVisible ? '▲' : '▼', isVisible ? '▼' : '▲');
 +        }
  
-            // Aktualisiere den Pfeil (▼ / ▲)+        function toggleSection(element) { 
 +            const content = element.nextElementSibling; 
 +            const isVisible = content.style.display === 'block'; 
 + 
 +            content.style.display = isVisible ? 'none' : 'block';
             element.textContent = element.textContent.replace(isVisible ? '▲' : '▼', isVisible ? '▼' : '▲');             element.textContent = element.textContent.replace(isVisible ? '▲' : '▼', isVisible ? '▼' : '▲');
         }         }