Forum - TAB-Menü / TAB-Spoiler / Boxen für Texte und Bildern

<style>
.tabmenu_live {
 font-family: Arial;
 max-width:70%;
 text-align:left;
 margin:auto auto 50px auto;
}
.tabmenu_ul {
 padding: 0;
 margin:0 0 -1px 0;
}
.tabmenu_ul li {
 display:inline-block;
 background: #eae9dc;
 padding:7px 9px;
 border:1px solid #eae9dc;
 color:#555555;
 font-size:14px;
 font-weight:bold;
 letter-spacing: 2px; 
 cursor:pointer;
}
.tabmenu_ul li:hover {
 border:1px solid #bbbbbb;
 background: #d9d8ce;
 box-shadow: 0.1rem 0.1rem 6px rgba(0, 0, 0, 0.4)
}
.tabmenu_ul li.current {
 background: #d9d8ce;
 color:#555555;
 border:1px solid #bbbbbb;
 border-bottom:1px solid #d9d8ce;
}
.tabmenu_live .tabcontent {
 background: #d9d8ce;
 border:1px solid #eae9dc;
 padding: 15px 25px 0 25px;
 color:#555555;
 /* width: 90%; */
 /* max-height: 200px; overflow:auto; */
}
 
.verlauf {
 background: linear-gradient(#eae9dc,#d9d8ce,#eae9dc);
 padding: 5px 20px 5px 5px;
 margin-bottom:5px;
 font-weight:bold;
}
.verlauf::before {
 content: "\25A0";
 padding-right: 4px;
 vertical-align: 2px;
}
</style>
 
<br><br><br>
<div class="tabmenu_live">
 
<ul class="tabmenu_ul">
  <li class="current">Impressum</li>
  <li>Datenschutz</li>
  <li>Mitglieder</li>
  <li>FAQ</li>
</ul>
<div style="clear:both;"></div>
 
<div class="tabcontent" style="display:block;">
  <div class="verlauf">Impressum & Kontakt</div>
  <div>Verantwortlicher Betreiber der Webseite</div>
  <div>Gründer von "Hilfe-Tricks-Tipps" und Inhaber der Domaint .......</div>
  <br>
</div>
 
<div class="tabcontent" style="display:none;">
  <div class="verlauf"><font color="#550000">Datenschutz & Nutzungshinweise></font></div>
  <h4>Allgemeine Hinweise</h4>
  <p>Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert .......</p>
  <br>
</div>
 
<div class="tabcontent" style="display:none;">
  <div class="verlauf"><font color="#005555">Mitglieder des Forums</font></div>
  <h4>Mitgliederliste</h4>
  <p>Eine Liste aller Mitglieder des Forums .......</p>
  <br>
</div>
 
<div class="tabcontent" style="display:none;">
 <div class="verlauf"><font color="#000088">FAQ (Hilfe)</font></div>
 <h4>Funktion und Suche</h4>
 <p>Hier finden Sie Hilfe zu den Xobor-Foren .......</p>
 <br>
</div>
 
</div>
 
<!-- Nur wenn JQuery nicht vorhanden ist, die kommentierenden Zeichen am Anfang und am Ende löschen -->
<!-- <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(){
 
$('.tabmenu_ul li').on("click", function() {
   $('.tabmenu_ul li').not($(this).toggleClass('current')).removeClass();
   $('.tabcontent').hide(500).find('.verlauf:contains("'+ $(this).html()+'")').closest('.tabcontent').show();
});
 
});
</script>
 

<style>
.tabmenu_live {
 font-family: Arial;
 max-width:70%;
 text-align:left;
 margin:auto auto 50px auto;
}
.tabmenu_ul{
 padding: 0;
 margin: 0;
}
.tabmenu_ul li{
 display:inline-block;
 margin: 5px 5px 10px 0;
}
.tabmenu_ul li a{
 background: #eae9dc;
 padding:7px 9px;
 border:1px solid #eae9dc;
 color:#555555;
 font-size:14px;
 font-weight:bold;
 letter-spacing: 2px; 
}
.tabmenu_ul li a:hover {
 background: #d9d8ce;
 padding-bottom: 7px !important;
 border:1px solid #bbbbbb !important;
 box-shadow: 0.1rem 0.1rem 6px rgba(0, 0, 0, 0.4);
}
.tabmenu_ul li a.current {
 background: #d9d8ce;
 color:#555555;
 border:1px solid #d9d8ce;
 padding-bottom: 14px;
}
.tabcontent {
 background: #d9d8ce;
 border:1px solid #eae9dc;
 padding: 15px 25px 0 25px;
 color:#555555;
 /* max-height: 400px; overflow:auto; */
 /* width: auto; */
}
.verlauf {
 background: linear-gradient(#eae9dc,#d9d8ce,#eae9dc);
 padding: 5px 20px 5px 5px;
 margin-bottom:5px;
 font-weight:bold;
}
.verlauf::before {
 content: "\25A0";
 padding-right: 4px;
 vertical-align: 2px;
}
</style>
 
<br><br><br>
 
<div class="tabmenu_live">
 
<ul class="tabmenu_ul">
  <li><a href="#" class="tab1 current" onclick="tabmenu('tab1')">Impressum</a></li>
  <li><a href="#" class="tab2" onclick="tabmenu('tab2')">Datenschutz</a></li>
  <li><a href="#" class="tab3" onclick="tabmenu('tab3')">Mitglieder</a></li>
  <li><a href="#" class="tab4" onclick="tabmenu('tab4')">FAQ</a></li>
</ul>
<div style="clear:both;"></div>
 
<div id="tab1" class="tabcontent" style="display:block">
  <div class="verlauf">Impressum</div>
  <h4>Verantwortlicher Betreiber der Webseite</h4>
  <p>Gründer von "Hilfe-Tricks-Tipps" und Inhaber der Domaint .......</p>
  <br>
</div>
 
<div id="tab2" class="tabcontent" style="display:none">
  <div class="verlauf">Datenschutz</div>
  <h4>Allgemeine Hinweise</h4>
  <p>Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert .......</p>
  <br>
</div>
 
<div id="tab3" class="tabcontent" style="display:none">
  <div class="verlauf">Mitglieder</div>
  <h4>Mitgliederliste</h4>
  <p>Eine Liste aller Mitglieder des Forums .......</p>
  <br>
</div>
 
<div id="tab4" class="tabcontent" style="display:none">
  <div class="verlauf">FAQ</div>
  <h4>Funktion und Suche</h4>
  <p>Hier finden Sie Hilfe zu den Xobor-Foren .......</p>
  <br>
</div>
 
</div>
 
<br><br><br>
 
<!--Nur wenn JQuery nicht vorhanden ist, die kommentierenden Zeichen am Anfang und am Ende löschen-->
<!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> -->
 
<script>
function tabmenu(id) {
$('.tabmenu_ul a').not($('.' +id).toggleClass('current')).removeClass('current');
$('.tabcontent').not($('#' +id).toggle(400)).hide(400);
}
</script>
 

<style>
.tabmenu_live {
 font-family: Arial;
 max-width:70%;
 text-align:left;
 margin:auto auto 50px auto;
}
.tabmenu_ul {
 padding: 0;
}
.tabmenu_ul li {
 display:inline-block;
 margin: 5px 5px 12px 0;
}
.tabmenu_ul li a{
 background: #eae9dc;
 padding:7px 9px;
 border:1px solid #eae9dc;
 color:#555555;
 font-size:14px;
 font-weight:bold;
 letter-spacing: 2px; 
 text-decoration: none;
}
.tabmenu_ul li a:hover {
 background: #d9d8ce;
 padding-bottom: 7px !important;
 border:1px solid #bbbbbb !important;
 box-shadow: 0.1rem 0.1rem 6px rgba(0, 0, 0, 0.4)
}
.ui-tabs-active a {
 background: #d9d8ce !important;
 color:#555555 !important;
 border:1px solid #bbbbbb;
 border-bottom:1px solid #d9d8ce !important;
 padding-bottom: 13px !important;
}
.tabcontent {
 background: #d9d8ce;
 color:#555555;
 border:1px solid #eae9dc;
 padding: 10px 25px;
 /* width: 90%; */
 /* max-height: 200px; overflow:auto; */
}
 
.verlauf {
 background: linear-gradient(#eae9dc,#d9d8ce,#eae9dc);
 padding: 5px 20px 5px 5px;
 margin-bottom:5px;
 font-weight:bold;
}
.verlauf::before {
 content: "\25A0";
 padding-right: 4px;
 vertical-align: 2px;
}
</style>
 
<br><br><br>
 
<div class="tabmenu_live">
<ul class="tabmenu_ul">
  <li><a href="#tab1">Impressum</a></li>
  <li><a href="#tab2">Datenschutz</a></li>
  <li><a href="#tab3">Mitglieder</a></li>
  <li><a href="#tab4">FAQ</a></li>
</ul>
<div style="clear:both;"></div>
 
<div id="tab1" class="tabcontent">
 <div class="verlauf">Impressum</div>
 <h4>Verantwortlicher Betreiber der Webseite</h4>
 <p>Gründer von "Hilfe-Tricks-Tipps" und Inhaber der Domaint .......</p>
 <br>
</div>
 
<div id="tab2" class="tabcontent">
 <div class="verlauf">Datenschutz</div>
 <h4>Allgemeine Hinweise</h4>
 <p>Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert .......</p>
 <br>
</div>
 
<div id="tab3" class="tabcontent">
 <div class="verlauf">Mitglieder</div>
 <h4>Mitgliederliste</h4>
 <p>Eine Liste aller Mitglieder des Forums .......</p>
 <br>
</div>
 
<div id="tab4" class="tabcontent">
 <div class="verlauf">Hilfe</div>
 <h4>Funktion und Suche</h4>
 <p>Hier finden Sie Hilfe zu den Xobor-Foren .......</p>
 <br>
</div>
 
</div>
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $( ".tabmenu_live").tabs({ collapsible: true}) ;
</script>