Individuelle Webentwicklung

Nicht immer ist eine Standardsoftware ausreichend um individuelle Anforderungen gerecht zu werden, wir schaffen Lösungen

Informationen
Bild: Individuelle Webentwicklung

Ein einfaches Accordion Tutorial für jQuery

Ein einfaches Accordion Tutorial für jQuery

Ein einfaches Horizontales Accordion Tutorial für jQuery. Minianleitung, Demo und ein Quellcode sind vorhanden.

Anleitung: Der Stylesheet (.css) Code sollte als Datei im Headbereich vom HTML Dokument eingebunden werden, sowie auch der Code vom Script. Man kann natürlich auch den ganzen Code komplett in eine HTML-Datei einfügen, wenn man das will.

Script (.js) wird in den Head-Bereich eingefügt:

Quellcode:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" >
// SeViR Simple Horizontal Accordion @2007
// http://letmehaveblog.blogspot.com
jQuery.fn.extend({
haccordion: function(params){
var jQ = jQuery;
var params = jQ.extend({
speed: 500,
headerclass: "header",
contentclass: "content",
contentwidth: 200
},params);
return this.each(function(){
jQ("."+params.headerclass,this).click(function(){
var p = jQ(this).parent()[0];
if (p.opened != "undefined"){
jQ(p.opened).next("div."+params.contentclass).animate({
width: "0px"
},params.speed);
}
p.opened = this;
jQ(this).next("div."+params.contentclass).animate({
width: params.contentwidth + "px"
}, params.speed);
});
});
}
});
</script>
<script type="text/javascript" >

$(function(){
$(".haccordion").haccordion();
});

</script>

 

Stylesheet (.css) wird ebenfalls im Head-Bereich eingefügt:

Quellcode:
<style type="text/css">
.haccordion .content {
float: left;
height:300px;
}
p {
margin:0px;
padding:0px;
}
.header {
background: #eee;
color: #222;
cursor: pointer;
border:1px solid #eee;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
margin-right:2px;
font-weight:bold;
float:left;
height:298px;
overflow:hidden;
}
.content {
width: 0px;
overflow: hidden;
}
.content_01 {
border:1px solid #000;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
margin-right:2px;
height:278px;
padding:10px;
background:#000;
color:#999;
}
</style>

 

HTML (.html) wird im Body eingefügt:

Quellcode:
<div class="haccordion">
<div class="header"><img src="http://www.zundel-webdesign.de/wp-content/themes/z-webdesign/images/accordion_tutorial_01.png" width="117" alt="Bild" /></div>
<div class="content">
<div class="content_01">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
</div>
</div>
<div class="header"><img src="http://www.zundel-webdesign.de/wp-content/themes/z-webdesign/images/accordion_tutorial_01.png" width="117" alt="Bild" /></div>
<div class="content">
<div class="content_01">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
</div>
</div>
<div class="header"><img src="http://www.zundel-webdesign.de/wp-content/themes/z-webdesign/images/accordion_tutorial_01.png" width="117" alt="Bild" /></div>
<div class="content">
<div class="content_01">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
</div>
</div>
</div>