Forum - RE: Fehlersuche: Neuer Spoiler für Webseite und Iconbar - Universell anpassbar! - 2

<!-- Neuer Spoiler 2 -->
<style>
.newSpoiler2 { 
    clear: both; 
    display: table-cell;
    font: 14px Open-Sans, sans-serif !important; 
    padding:5px;
    margin: 5px;
}
.newSpoiler2 .newTitle2 {
    width:auto;
    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: #cccccc;
    padding: 3px 10px;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.9);
    cursor: pointer;
    text-transform: uppercase;
    text-align: center;
}
.newSpoiler2 .newTitle2.\31 {  
    width: calc(100% - 20px) !important;
    border-radius: 25px;
    -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease;
    color: #ffffff;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.9);
}
.newSpoiler2 .newTitle2:hover {
    background-color: #cccccc;
    background-image: linear-gradient(0deg, #444444 0%, #cccccc 50%, #444444 100%) !important;
    color: #000000;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
}
.newSpoiler2 .newContent2 {
    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);
}
 
.newSpoiler2 .newContent2.\30 {
    max-height: 0;
    -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;
}  
.newSpoiler2 .newContent2.\31 {
    height: auto;
    max-height: 150px;
    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;
}
 
.newSpoiler2 p {
    color: #000000;
    padding: 0 10px ;
}
.newSpoiler2 h4 {
    margin:10px !important;
    font-size: 17px !important;
    font-weight:bold;
    color: #000000;
    text-align: center;
}
</style>
 

<div class="newSpoiler2">
<center>
  <div class="newTitle2 1">Zusammenarbeit</div> 
      <div class="newContent2 1">
        <h4>Unterschiedliche Textlängen</h4>
        <p>Ihr Text mit unterschiedlicher Länge! Überlanger Text!<br>
           Ihr Text mit unterschiedlicher Länge! <br>
           Ihr Text mit unterschiedlicher Länge! <br>
           Ihr Text mit unterschiedlicher Länge! <br>
           Ihr Text mit unterschiedlicher Länge! <br>
           Ihr Text mit unterschiedlicher Länge! <br>
           Ihr Text mit unterschiedlicher Länge! <br>
           Ihr Text mit unterschiedlicher Länge! <br>
           Ihr Text mit unterschiedlicher Länge!
        </p>
      </div> 
  </center>     
</div> 
 
<div class="newSpoiler2">
  <center>
    <div class="newTitle2 0">Über uns</div> 
      <div class="newContent2 0">
        <h4>Unterschiedliche Textlängen</h4>
        <p>Ihr Text mit unterschiedlicher und Umbruch in den Zeilen! Überlanger Text!<br>
           Ihr Text mit unterschiedlicher Länge!<br>
           Ihr Text mit unterschiedlicher Länge!
        </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(){
  // Spoiler geöffnet starten, folgende Zeile freigeben!
  // $('.newTitle2, .newContent2').addClass('1');
  $('.newTitle2').on('click',function(){
    $(this).toggleClass('1 0').next().toggleClass('1 0');
  });
});
</script>
 

<!-- Neuer Spoiler 2 -->
<style>
.newSpoiler2 { 
    clear: both; 
    display: table-cell;
    font: 14px Open-Sans, sans-serif !important; 
    padding:5px;
    margin: 5px;
}
.newSpoiler2 .newTitle2 {
    width:auto;
    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: #cccccc;
    padding: 3px 10px;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.9);
    cursor: pointer;
    text-transform: uppercase;
    text-align: center;
}
.newSpoiler2 .newTitle2.\31 {  
    width: calc(100% - 20px) !important;
    border-radius: 25px;
    -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease;
    color: #ffffff;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.9);
}
.newSpoiler2 .newTitle2:hover {
    background-color: #cccccc;
    background-image: linear-gradient(0deg, #444444 0%, #cccccc 50%, #444444 100%) !important;
    color: #000000;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
}
.newSpoiler2 .newContent2 {
    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);
}
 
.newSpoiler2 .newContent2.\30 {
    max-height: 0;
    -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;
}  
.newSpoiler2 .newContent2.\31 {
    height: auto;
    max-height: 150px;
    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(){
  // Spoiler geöffnet starten, folgende Zeile freigeben!
  // $('.newTitle2, .newContent2').addClass('1');
  $('.newTitle2').on('click',function(){
    $(this).toggleClass('1 0').next().toggleClass('1 0');
  });
});
</script>
 

[NeuerSpoiler2={{newspoiler}}={{breite}}={{hoehe}}={{zahl}}]
 

...
 

[/NeuerSpoiler2]
 

<div class="newSpoiler2"><center><div class="newTitle2 {{zahl}}" style="width: {{breite}};">{{newspoiler}}</div><div class="newContent2 {{zahl}}" style="max-width: calc({{breite}} - 20px); max-height: {{hoehe}};">
 

...
 

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

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

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