Forum - Versuche den HTML - Code zu teilen, für den Beitrag, für die Iconbar

<!-- Anfang - Spoiler ÜBER UNS Verweise Zusammenarbeit -->
<!-- Anfang - Spoiler ÜBER UNS Verweise Zusammenarbeit -->
<!-- Anfang - Spoiler ÜBER UNS Verweise Zusammenarbeit -->
 
<style> 
.accord {
    font: 14px Open-Sans, sans-serif !important; 
    /* margin: 0 auto !important; */
    border: 3px double #000000;
    border-radius: 14px;
    width: 390px;
    padding: 10px 10px 0 10px;
    background: #f9f9f9;
}
.accord ul {
    list-style: none;
    margin: 0;
    padding: 0;    
}
.accord li {
    margin: 0;
    padding: 0;
}
.accord [type=radio], .accord [type=checkbox] {
    display: none;
}
.accord label {
    display: block;
    font: 18px Open-Sans, sans-serif !important; 
    line-height: 19px;
    background-color: #b7d4dc;
    background-image: linear-gradient(0deg, #000090 0%, #3c6cce 50%, #000090 100%);
    border: 1px solid #000000;
    border-radius: 5px;
    color: #40637a;
    color: #eeeeee;
    text-shadow: 2px 2px 2px rgba(19,20,19,20);
    cursor: pointer;
    text-transform: uppercase;
    text-align: center;
}
.accord ul li label:hover, .accord [type=radio]:checked ~ label, .accord [type=checkbox]:checked ~ label {
    background-color: #0863be;
    background-image: linear-gradient(0deg, #2222b2 0%, #5e8eef 50%, #2222b2 100%) !important;
    color: #000000;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}
.accord [type=radio]:checked ~ label, .accord [type=checkbox]:checked ~ label {
    border-radius: 25px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
.accord .content2 {
    text-align:left !important;
    margin: 10px;
    padding: 0px 10px;
    overflow: hidden;
    border: 5px solid #aaaaaa;
    border-radius: 5px;
}
.accord p {
    color: #000000;
    margin: 5px 0 10px 0;
}
.accord h4 {
    font-size: 17px !important;
    font-weight:bold;
    color: #000000;
    padding: 0;
    margin-top: 10px;
    text-align: center;
} 
.vertical ul li {
    overflow: hidden;
    margin: 0;
}
.vertical ul li label {
    padding: 10px;
}
.vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label {
    border-bottom: 0;
}
.vertical ul li label:hover {
    border: 1px solid #000000;
}
.vertical ul li .content2 {
    height: 0px;
    border-top: 0;
    -webkit-transition: all .4s ease-out;
    -moz-transition: all .4s ease-out;
    transition: all .4s ease-out;
}
.vertical [type=checkbox]:checked ~ label ~ .content2 {
    height: auto;
    /* height: 96px; */
    /* overflow: auto; */
    border: 1px solid #000000;
}  
</style>
 
 <div class="Spoiler_Visitenkarte"></div>
 
<script>
document.addEventListener('DOMContentLoaded', function() {
$(".Spoiler_Visitenkarte").html(`
 
<br> 
<div class="accord vertical">
  <ul>
    <li>
      <input type="checkbox" id="checkbox-1" name="checkbox-accord" checked>
      <label for="checkbox-1">ÜBER UNS</label>
      <div class="content2">
        <h4>Unterschiedliche Textlängen</h4>
        <p>Ihr Text mit unterschiedlicher Länge und Umbruch in den Zeilen! <br><br>
           Ihr Text mit unterschiedlicher Länge! <br>
           Ihr Text mit unterschiedlicher Länge! <br></p>
      </div>        
    </li>         
    <li>             
      <input type="checkbox" id="checkbox-2" name="checkbox-accord">             
      <label for="checkbox-2">Verweise</label>             
      <div class="content2">
        <h4>Unterschiedlichen Textlängen und langen Überschriften</h4>
        <p>Ihr Text mit unterschiedlicher Länge und Umbruch in den Zeilen! 
           <br>
           Ihre Text-Überschriften mit unterschiedlicher Länge! 
           <br>
           Ihr Text mit unterschiedlicher Länge!</p>            
      </div>         
    </li>         
    <li>             
      <input type="checkbox" id="checkbox-3" name="checkbox-accord">             
      <label for="checkbox-3">Zusammenarbeit</label>             
      <div class="content2">                 
        <h4>Beispiel mit Endlos-Text</h4>                 
        <p>Weil die Iconbar nur begrenzt Daten aufnehmen kann, muss das komplette Skript mit der CSS ausgelagert werden!
           <br>
           Da die Angaben in Deinem "Spoiler im Visitenkartenformat" fest sind und nicht nachträglich bearbeitet werden brauchen, ist auch nur einen einfachen Foren-Code mit einem DIV-Container notwendig!
           <br>
           Genial ist mal wieder der vielseitige Spoiler, der nur mit CSS-Einträgen aufgebaut ist!
           <br>
           Um sich einen Eindruck zu verschaffen, wie der Spoiler aufgebaut ist, gibt es das HTML-Script!</p>            
      </div>         
    </li>      
  </ul> 
</div>
<br> 
`);
 
});
</script>
 
<!-- Ende - Spoiler ÜBER UNS Verweise Zusammenarbeit -->
<!-- Ende - Spoiler ÜBER UNS Verweise Zusammenarbeit -->
<!-- Ende - Spoiler ÜBER UNS Verweise Zusammenarbeit -->
 

[Spoiler_Visitenkarte]
 

<div class="Spoiler_Visitenkarte"></div>
 

//img.homepagemodules.de/ds/static/gaia/spoiler_neu.png
 

<!-- Anfang - Spoiler ÜBER UNS Verweise Zusammenarbeit -->
<!-- Anfang - Spoiler ÜBER UNS Verweise Zusammenarbeit -->
<!-- Anfang - Spoiler ÜBER UNS Verweise Zusammenarbeit -->
 
<style> 
.accord {
    font: 14px Open-Sans, sans-serif !important; 
    /* margin: 0 auto !important; */
    border: 3px double #000000;
    border-radius: 14px;
    width: 390px;
    padding: 10px 10px 0 10px;
    background: #f9f9f9;
}
.accord ul {
    list-style: none;
    margin: 0;
    padding: 0;    
}
.accord li {
    margin: 0;
    padding: 0;
}
.accord [type=radio], .accord [type=checkbox] {
    display: none;
}
.accord label {
    display: block;
    font: 18px Open-Sans, sans-serif !important; 
    line-height: 19px;
    background-color: #b7d4dc;
    background-image: linear-gradient(0deg, #000090 0%, #3c6cce 50%, #000090 100%);
    border: 1px solid #000000;
    border-radius: 5px;
    color: #40637a;
    color: #eeeeee;
    text-shadow: 2px 2px 2px rgba(19,20,19,20);
    cursor: pointer;
    text-transform: uppercase;
    text-align: center;
}
.accord ul li label:hover, .accord [type=radio]:checked ~ label, .accord [type=checkbox]:checked ~ label {
    background-color: #0863be;
    background-image: linear-gradient(0deg, #2222b2 0%, #5e8eef 50%, #2222b2 100%) !important;
    color: #000000;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}
.accord [type=radio]:checked ~ label, .accord [type=checkbox]:checked ~ label {
    border-radius: 25px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
.accord .content2 {
    text-align:left !important;
    margin: 10px;
    padding: 0px 10px;
    overflow: hidden;
    border: 5px solid #aaaaaa;
    border-radius: 5px;
}
.accord p {
    color: #000000;
    margin: 5px 0 10px 0;
}
.accord h4 {
    font-size: 17px !important;
    font-weight:bold;
    color: #000000;
    padding: 0;
    margin-top: 10px;
    text-align: center;
} 
.vertical ul li {
    overflow: hidden;
    margin: 0;
}
.vertical ul li label {
    padding: 10px;
}
.vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label {
    border-bottom: 0;
}
.vertical ul li label:hover {
    border: 1px solid #000000;
}
.vertical ul li .content2 {
    height: 0px;
    border-top: 0;
    -webkit-transition: all .4s ease-out;
    -moz-transition: all .4s ease-out;
    transition: all .4s ease-out;
}
.vertical [type=checkbox]:checked ~ label ~ .content2 {
    height: auto;
    /* height: 96px; */
    /* overflow: auto; */
    border: 1px solid #000000;
}  
</style>
 
 
 
<script>
document.addEventListener('DOMContentLoaded', function() {
$(".Spoiler_Visitenkarte").html(`
 
<br> 
<div class="accord vertical">
  <ul>
    <li>
      <input type="checkbox" id="checkbox-1" name="checkbox-accord" checked>
      <label for="checkbox-1">ÜBER UNS</label>
      <div class="content2">
        <h4>Unterschiedliche Textlängen</h4>
        <p>Ihr Text mit unterschiedlicher Länge und Umbruch in den Zeilen! <br><br>
           Ihr Text mit unterschiedlicher Länge! <br>
           Ihr Text mit unterschiedlicher Länge! <br></p>
      </div>        
    </li>         
    <li>             
      <input type="checkbox" id="checkbox-2" name="checkbox-accord">             
      <label for="checkbox-2">Verweise</label>             
      <div class="content2">
        <h4>Unterschiedlichen Textlängen und langen Überschriften</h4>
        <p>Ihr Text mit unterschiedlicher Länge und Umbruch in den Zeilen! 
           <br>
           Ihre Text-Überschriften mit unterschiedlicher Länge! 
           <br>
           Ihr Text mit unterschiedlicher Länge!</p>            
      </div>         
    </li>         
    <li>             
      <input type="checkbox" id="checkbox-3" name="checkbox-accord">             
      <label for="checkbox-3">Zusammenarbeit</label>             
      <div class="content2">                 
        <h4>Beispiel mit Endlos-Text</h4>                 
        <p>Weil die Iconbar nur begrenzt Daten aufnehmen kann, muss das komplette Skript mit der CSS ausgelagert werden!
           <br>
           Da die Angaben in Deinem "Spoiler im Visitenkartenformat" fest sind und nicht nachträglich bearbeitet werden brauchen, ist auch nur einen einfachen Foren-Code mit einem DIV-Container notwendig!
           <br>
           Genial ist mal wieder der vielseitige Spoiler, der nur mit CSS-Einträgen aufgebaut ist!
           <br>
           Um sich einen Eindruck zu verschaffen, wie der Spoiler aufgebaut ist, gibt es das HTML-Script!</p>            
      </div>         
    </li>      
  </ul> 
</div>
<br> 
`);
 
});
</script>
 
<!-- Ende - Spoiler ÜBER UNS Verweise Zusammenarbeit -->
<!-- Ende - Spoiler ÜBER UNS Verweise Zusammenarbeit -->
<!-- Ende - Spoiler ÜBER UNS Verweise Zusammenarbeit -->