jQueryを使用して、2種類のアコーディオンを作成します。
2種類といっても、動作が少し違うだけです。。。

HTMLとCSS

<dl>
<dt>1.タイトル</dt>
<dd>サンプルテキストサンプルテキストサンプルテキスト</dd>
<dt>2.タイトル</dt>
<dd>サンプルテキストサンプルテキストサンプルテキスト</dd>
<dt class="last-child">3.タイトル</dt>
<dd>サンプルテキストサンプルテキストサンプルテキスト</dd>
</dl>

dl {
width: 300px;
border: solid #000 1px;
}

dt {
padding: .5em;
height:30px;
background: #000;
border-bottom: solid #fff 1px;
color: #fff;
font-weight:bold;
}

dt.last-child {
border-bottom: none;
}

dd {
height:150px;
background: #fff;
}

1つのdd要素だけが開く：Javascriptソース

$(function(){

//CSSの設定
$("dt").css("cursor","pointer"); //dt要素のカーソルをポインターに変更
$("dd:not(:first)").css("display","none"); //最初のdd要素以外を非表示

//dt要素がクリックされたときの動作
$("dt").click(function(){
if($("+dd",this).css("display")=="none"){ //クリックされたdt要素に隣接するdd要素が非表示だった場合
$("dd").slideUp("slow"); //スライドアップで非表示
$("+dd",this).slideDown("slow"); //クリックされたdt要素に隣接するdd要素をスライドダウンで表示
}
});

});

動作

dt要素をクリックするとdd要素が閉じますが、クリックしたdt要素に隣接しているdd要素のみ開きます。
その設定が8行目からのif文で記載されています。
10行目で全てのdd要素をスライドアップで非表示にしています。
その後、11行目のクリックされたdt要素に隣接したdd要素をスライドダウンで表示しています。
10行目と11行目を逆にすると、開いてすぐに閉じてしまいます。

開きっぱなしのdd要素：Javascriptソース

$(function(){

//CSSの設定
$("dt").css("cursor","pointer"); //dt要素のカーソルをポインターに変更
$("dd").css("display","none"); //最初のdd要素以外を非表示

//dt要素がクリックされたときの動作
$("dt").click(function(){
if($("+dd",this).css("display")=="none"){ //クリックされたdt要素に隣接するdd要素が非表示だった場合
$("+dd",this).slideDown("slow"); //クリックされたdt要素に隣接するdd要素をスライドダウンで表示
} else {
$("+dd",this).slideUp("slow"); //クリックされたdt要素に隣接するdd要素が表示されていた場合、スライドアップで非表示
}
});

});

動作

dt要素をクリックすると隣接しているdd要素が開きます。
その他のdd要素は反応しません。

8行目のif文でdd要素が非表示だった場合の設定が記述されていますが、
11行目のelseでdd要素が表示されていた場合の設定を記述しています。

サンプル

こちらから、2つのサンプルを確認できます。
サンプル

1. Web-Parkのホーム > 
2. Javascript > 
3. jQueryで作る2種類のアコーディオン