Forum - Versuche den HTML - Code zu teilen - Spoiler 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 -->
 

<!-- Neuer Spoiler -->
<style> 
.newSpoiler { 
    clear: both; 
    display: table-cell;
    font: 14px Open-Sans, sans-serif !important; 
    padding:5px;
    margin: 5px;
}
.newSpoiler .newTitle {
    width:230px;
    width:auto !important;
    font: bold 14px Open-Sans, sans-serif !important; 
    letter-spacing: 2px;
    background-color: #aaaaaa;
    background-image: linear-gradient(0deg, #222222 0%, #aaaaaa 50%, #222222 100%);
    border: 2px solid #000000;
    border-radius: 5px;
    color: #40637a;
    color: #eeeeee;
    padding: 3px 10px;
    text-shadow: 2px 2px 2px rgba(19,20,19,20);
    cursor: pointer;
    text-transform: uppercase;
    text-align: center;
}
.newSpoiler .styleTitle {
    max-width:100% !important;
    border-radius: 25px;
    -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease;*/
}
.newSpoiler .newTitle:hover {
    background-color: #cccccc;
    background-image: linear-gradient(0deg, #444444 0%, #cccccc 50%, #444444 100%) !important;
    color: #000000;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}
.newSpoiler .newContent {
    height: 0px;
    width: auto;
    max-width: 200px;
    text-align:left !important;
    margin: 10px;
    padding: 0 10px;
    overflow: hidden;
    border: 3px solid #aaaaaa;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0,0, 0, 0.7);
    -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;
}
.newSpoiler .openDiv {
    height: auto;
    /* height:200px; */
 
    max-width: 800px !important;
    background-color: #eeeeee;
	
    /* border: 3px solid #aaaaaa; */
    overflow: auto;
    padding: 10px;
    -webkit-transition: all 1s; -moz-transition: all 1s; transition: all 1s;
} 
.newSpoiler p {
    color: #000000;
    padding: 0px 10px 10px 10px;
}
.newSpoiler h4 {
    margin:10px !important;
    font-size: 17px !important;
    font-weight:bold;
    color: #000000;
    text-align: center;
}  
</style>
 

<div class="newSpoiler">
<center>
  <div class="newTitle">Zusammenarbeit</div> 
      <div class="newContent">
        <h4>Unterschiedliche Textlängen</h4>
        <p>Ihr Text mit unterschiedlicher Länge! <br><br>
           Ihr Text mit unterschiedlicher Länge! <br>
           Ihr Text mit unterschiedlicher Länge! <br>
        </p>
      </div> 
  </center>     
</div> 
 
 
<div class="newSpoiler">
  <center>
    <div class="newTitle">Zusammenarbeit</div> 
      <div class="newContent">
        <h4>Unterschiedliche Textlängen</h4>
        <p>Ihr Text mit unterschiedlicher und Umbruch in den Zeilen! Überlanger Text<br>
           Ihr Text mit unterschiedlicher <br>
           Ihr Text mit unterschiedlicher <br>
        </p>
      </div> 
  </center>      
</div>
 
<!-- Wenn nicht vorhanden (bei z.B. eigenen HTML-Editoren / Im Xobor-Forum bereits vorhanden!) -->
<!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> -->
<script>
window.addEventListener('load', function(){
  $('.newTitle').on('click',function(){
    $(this).toggleClass('styleTitle').next().toggleClass('openDiv')
  });
});
</script>
 

<!-- Neuer Spoiler -->
<style> 
.newSpoiler { 
    clear: both; 
    display: table-cell;
    font: 14px Open-Sans, sans-serif !important; 
    padding:5px;
    margin: 5px;
}
.newSpoiler .newTitle {
    width:auto !important;
    font: bold 14px Open-Sans, sans-serif !important; 
    letter-spacing: 2px;
    background-color: #aaaaaa;
    background-image: linear-gradient(0deg, #222222 0%, #aaaaaa 50%, #222222 100%);
    border: 2px solid #000000;
    border-radius: 5px;
    color: #40637a;
    color: #eeeeee;
    padding: 3px 10px;
    text-shadow: 2px 2px 2px rgba(19,20,19,20);
    cursor: pointer;
    text-transform: uppercase;
    text-align: center;
}
.newSpoiler .styleTitle {
    max-width:100% !important;
    border-radius: 25px;
    -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease;*/
}
.newSpoiler .newTitle:hover {
    background-color: #cccccc;
    background-image: linear-gradient(0deg, #444444 0%, #cccccc 50%, #444444 100%) !important;
    color: #000000;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}
.newSpoiler .newContent {
    height: 0px;
    width: auto;
    max-width: 200px);
    text-align:left !important;
    margin: 10px;
    padding: 0 10px;
    overflow: hidden;
    border: 3px solid #aaaaaa;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0,0, 0, 0.7);
    -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;
}
.newSpoiler .openDiv {
    height: auto;
    /* height:200px; */
 
    max-width: 800px !important;
    background-color: #eeeeee;
	
    /* border: 3px solid #aaaaaa; */
    overflow: auto;
    padding: 10px;
    -webkit-transition: all 1s; -moz-transition: all 1s; transition: all 1s;
} 
</style>
 

<script>
window.addEventListener('load', function(){
  $('.newTitle').on('click',function(){
    $(this).toggleClass('styleTitle').next().toggleClass('openDiv')
  });
});
</script>
 

[NeuerSpoiler={{newspoiler}}={{breite}}]
 

...
 

[/NeuerSpoiler]
 

<div class="newSpoiler"><center><div class="newTitle" style="max-width: {{breite}}">{{newspoiler}}</div><div class="newContent" style="max-width: calc({{breite}} - 20px)">
 

...
 

</div></center></div>
 

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

<div onclick="xob_insert('[NeuerSpoiler=Überschrift=200px]','[/NeuerSpoiler]')" class="xob_icon_cont" id="icon_4000"><img alt="" title="Neuer Spoiler" class="xob_icon" src="https://img.homepagemodules.de/ds/static/gaia/spoiler_neu.png"></div>