Slideout Bereiche

Skript von Werner-Zenk.de 

Seitenbereiche ein- und ausblenden

Slideout Bereiche

Klicke auf die Buttons zum Öffnen und Schließen dieser Seitenbereiche

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.

Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht - ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik.

Diesem Bereich habe ich noch ein wenig CSS gegeben und ein Bild eingefügt.

div#content2 {
  background-color: #efefef;
  padding: 20px;
  border-radius: 30px;
  border: 1px solid #3b7cb7;
  box-shadow: 5px 5px 5px #888888;
}


Slideout Bereich

Dieses Skript wurde von Werner-Zenk.de vorgestellt.


Das JavaScript:

... kopiert dieses Skript in den Bereich "End of <body> code" in den "Seiteneinstellungen"

  <!-- Toggle-Hide Skript von Werner-Zenk.de vom 03.12.2019 -->
  <script>
        $('#content1').hide();
        $('#content2').hide();

        $('#ID-BTN-1').click(function(e) {
            $('#content1').slideToggle(500);
              $('#content2').hide();
            }
        );

         $('#ID-BTN-2').click(function(e) {
            $('#content2').slideToggle(500);
              $('#content1').hide();
            }
        );
  </script>



Hier mein Inhalt

Ich habe hier einen einfachen Block mit 2 Buttons verwendet und den Text hinzugefügt.

Achtet auf die IDs der beiden Buttons und der beiden Textbereiche aus dem JavaScript oben, die ich in dem Quelltext mit hinzugefügt habe. 

Quelltext

<div class="container">
 <div class="media-container-row title">
  <div class="col-md-10 col-lg-8">

   <div class="mbr-section-btn align-center" mbr-buttons mbr-theme-style="display-4" data-toolbar="-mbrBtnMove">
   <span id="ID-BTN-1"><a class="btn btn-primary btn-md" href="javascript: void();" data-app-placeholder="Type Text">Bereich 1</a></span>
   <span id="ID-BTN-2"><a class="btn btn-md btn-success" href="javascript: void();" data-app-placeholder="Type Text">Bereich 2</a></span>
   </div>
   
   <div id="content1" style="margin-top: 50px;">
     <p style="color: #a61a3d;">Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.</p>
   </div>
    
   <div id="content2" style="margin-top: 50px;">
     <p style="color: #3b7cb7;">Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht - ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik.</p>
   </div>
    
   </div>
  </div>
</div>


Code
Adresse

Schöne Strasse 1, Berlin

Deutschland