Slidebox

Eine Slidebox öffnet sich bei Anwahl der selben. Als Inhalt kann Text stehen (Graphiken sind auch möglich).

Zuerst muss jquery eingebunden werden

<<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>



Danach das eigenltiche Script.
Entweder direkt in den Quelltext

<script type="text/javascript">
  $(function(){
    $('.slidebox_handle').bind('click', function(){
        if ($(this).hasClass('slidebox_minus')) {
            $(this).next('div').slideUp();
            $(this).removeClass('slidebox_minus');
        } else { // alle anderen einklappen
            $('.slidebox_handle').not(this).next('div').slideUp();
            $('.slidebox_handle').not(this).removeClass('slidebox_minus');
            $(this).next('div').slideDown();
            $(this).addClass('slidebox_minus');
    }
    });
    // hoehe von content anpassen
    if ($('#submenu').length && $('#contentbox').height() < $('#submenu').height()-80) $('#contentbox').height($('#submenu').height()-80);        });
</script>


oder als js Datei

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



Im BODY-Tag kann folgendes stehen

<div class="slidebox">
    <div class="slidebox_handle slidebox_minus">lorem ipsum</div>
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
<div class="slidebox">
    <div class="slidebox_handle">lorem ipsum</div>
    <div style="display: none;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
<div class="slidebox slidebox_last">
    <div class="slidebox_handle">lorem ipsum</div>
    <div style="display: none;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>



hier noch ein CSS dazu

.slidebox {
    width: 50%;
    padding: 2px 0;
    border-top: 1px dotted #3c3c3c;
}
.slidebox div {
    padding-left: 25px
}
.slidebox_handle {
    cursor: pointer;
    font-weight: bold;
    background: url(../images/plus.png) no-repeat 0 3px;
}
.slidebox_handle a {
    border: 0;
}
.slidebox_minus {
    background: url(../images/minus.png) no-repeat 0 3px;
}
.slidebox_last {
    border-bottom: 1px dotted #3c3c3c;
}
.slidebox ul {
    margin: 0;
}
.err {
    color: #f00;
    font-weight: bold;
}


Beispiel:

Startbox

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor

Mittlere Box(en)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor

Endbox

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor

Eine Anleitung und die dazugehörigen Dateien...

Weiterlesen

Mit dem backstretch script lässt sich eine simple...

Weiterlesen

Eine Slidebox öffnet sich bei Anwahl der selben....

Weiterlesen