Pull the Trigger - Die wunderbaren Toggle Container

 

Die Toggle Container sind individuell einsetzbar und eignen sich besonders um Seiten übersichtlich und klein zu halten und dennoch viel Text und Images unterzubringen .

Hier sind zwei verschiedene Größen , die erste hat die Breite von 550 Pixel und die anderen darunter 750 Pixel .

Ich hab den Trigger ein wenig modifiziert und den Script meiner Webseite angepasst .

Um jQuery und dessen mitgelieferte Funktionen zu nutzen, muss man die JavaScript-Datei im Head-Bereich einbinden, die man sich von der jQuery-Website herunterladen kann.

Das Original hat Open / Close Buttons am Trigger sowie Images innerhalb des Textes eingefügt .

<script type="text/javascript" src="js/jquery.js"></script>

Hier müssen gegebenenfalls der Pfad und die Dateinamen angepasst werden.

 

Hier ist der Script : Klick →

Container Original 500 Pixel :

 

Das kommt in den head - Bereich :

<script type="text/javascript">
$(document).ready(function(){
//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide();
//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$("h2.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
return false; //Prevent the browser jump to the link anchor
});
});
</script>

 

Das kommt in den body - Bereich :

<h2 class="trigger"><a href="#">Hier ist die Überschrift</a></h2>
<div class="toggle_container">
<div class="block">
<img src="Mein Beispiel Bild.jpg" alt="" />
<p>Hier kommt der Text</p>

<p>Und eventuell weiterer Text. </p>
</div>
</div>

Das wäre der erste Container , um weitere hinzuzufügen einfach wiederholen .

 

Hier ist der CSS Code : Klick →

Container Original 500 Pixel :

<style type="text/css">
h2.trigger {
padding: 0 0 0 50px;
margin: 0 0 5px 0;
background: url(files/h2_trigger_a.gif) no-repeat;
height: 46px;
line-height: 46px;
width: 450px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.trigger a {
color: #fff;
text-decoration: none;
display: block;
}
h2.trigger a:hover {
color: #ccc;
}
h2.active {background-position: left bottom;}
.toggle_container {
margin: 0 0 5px;
padding: 0;
border-top: 1px solid #d6d6d6;
background: #f0f0f0 url(files/toggle_block_stretch.gif) repeat-y left top;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
}
.toggle_container .block {
padding: 20px;
background: url(files/toggle_block_btm.gif) no-repeat left bottom;
}
.toggle_container .block p {
padding: 5px 0;
margin: 5px 0;
}
.toggle_container h3 {
font: 2.5em normal Georgia, "Times New Roman", Times, serif;
margin: 0 0 10px;
padding: 0 0 5px 0;
border-bottom: 1px dashed #ccc;
}
.toggle_container img {
float: left;
margin: 10px 15px 15px 0;
padding: 5px;
background: #ddd;
border: 1px solid #ccc;
}
</style>

Am besten wäre es eine externe CSS - Datei anzulegen .

 

 

Hier ist der Script : Klick →

Container 750 Pixel breit :

Das kommt in den head - Bereich :

<script type="text/javascript">
$(document).ready(function(){
//Hide (Collapse) the toggle containers on load
$(".toggle_container_big").hide();
//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$("h2.trigger_big").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
return false; //Prevent the browser jump to the link anchor
});
});
</script>

 

Das kommt in den body - Bereich :

<h2 class="trigger_big"><a href="#">Hier ist die Überschrift</a></h2>
<div class="toggle_container_big">
<div class="block">
<img src="Mein Beispiel Bild.jpg" alt="" />
<p>Hier kommt der Text</p>

<p>Und eventuell weiterer Text. </p>
</div>
</div>

Das wäre der erste Container , um weitere hinzuzufügen einfach wiederholen .

 

Hier ist der CSS - Code : Klick →

Toggle Container 750 Pixel :

<style type="text/css"> h2.trigger_big {
padding: 0;
margin: 0 0 30px 0;
background: url(line-greybackground.png) bottom repeat-x;
height: 46px;
line-height: 46px;
width: 750px;
font-size: 1.2em;
font-weight: normal;
float: left;
}
h2.trigger_big a {
color: #369;
text-decoration: none;
display: block;
}
h2.trigger_big a:hover {
color: #0099cc;
}
.toggle_container_big {
border-top: 1px solid #d6d6d6;
background: #f4f4f4 url(toggle_block_stretch2.gif) repeat-y left top;
margin: 0 0 5px;
padding: 0;
overflow: hidden;
width: 750px;
clear: both;
}
.toggle_container_big .block {
padding: 40px; /*--Padding of Container--*/
background: url(toggle_block_btm2.gif) no-repeat left bottom; /*--Bottom rounded corners--*/
}
</style>

 

Der Background der Webseite , Linkfarbe , Mouseover usw. können individuell angepasst werden .

Am besten wäre es eine externe CSS - Datei anzulegen .

Alle dazugehörigen Dateien und Images für die Toggle - Container :

 

Weitere Software

 

 

 

 

 

Download

 

 

 

 

 

  • Schnellster Manager und Betrachter
  • Müheloser Import und Verwaltung Ihrer Bilder
  • Digital Photo Software All in One
  • Korrigieren und Nacharbeiten Ihrer Photos
  • Unendliche Möglichkeiten rund ums Photo