jQuery Collapse - 點擊標題後可展開或關閉內容

jQuery Collapse - 點擊標題後可展開或關閉內容

~程式段~
<ｈｅａｄ id="Head1" runat="server">
<ｓｃｒｉｐｔ type="text/javascript">
$(function()
{
    $(".pp").click(function(event)
    {
       event.preventDefault();//取消預設事件
       $(this).next("div").slideToggle(100);//通過高度變化來切換所有匹配元素的可見性，並在切換完成後可選地觸發一個回調函數。
       //$("#caja").slideDown();//通過高度變化（向下增大）
       //slideToggle(speed,callback)
       //這裡的 speed (String|Number): (可選) 三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
       
    });

    $("#mostrar2").click(function(event)
    {
       event.preventDefault();//取消預設事件
       $("#caja2").slideToggle(1);//通過高度變化來切換所有匹配元素的可見性，並在切換完成後可選地觸發一個回調函數。
       //$("#caja").slideDown();//通過高度變化（向下增大）
       //slideToggle(speed,callback)
       //這裡的 speed (String|Number): (可選) 三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
       
    });

    $("#caja a").click(function(event)
    {
       event.preventDefault();//取消預設事件
       $("#caja").slideUp("fast",function(){alert("bye bye！")});// 通過高度變化（向上減小）
    });
   
    $("#caja2 a").click(function(event)
    {
       event.preventDefault();//取消預設事件
       $("#caja2").slideUp("fast",function(){alert("bye bye2！")});// 通過高度變化（向上減小）
    });
   
    $("#webA").click(function(event)
    {
       event.preventDefault();//取消預設事件
       alert("大家好！！！");
    });
   
   
});

//使用的css
<ｓｔｙｌｅ type="text/css">  
body {  
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #666666;    
}  
a{color:#993300; text-decoration:blink;}  
#caja {
    width:70%;
    display: none;
    padding:5px;
    border:2px solid #FADDA9;
    background-color:#FDF4E1;
}  
a2{color:#993300; text-decoration:blink;}  
#caja2 {
    width:70%;
    display: none;
    padding:5px;
    border:2px solid #FADDA9;
    background-color:#FDF4E1;
}

#mostrar{  
    display:block;
    width:70%;
    padding:5px;
    border:2px solid #D0E8F4;
    background-color:#ECF8FD;
}
 #mostrar2{  
    display:block;
    width:70%;
    padding:5px;
    border:2px solid #00AA66;
    background-color:#66DD78;
}
<／ｓｔｙｌｅ>

<ｂｏｄｙ>
    <ｆｏｒｍ id="form1" runat="server">
<ａｓｐ:Repeater ID="Repeater1" runat="server" DataSourceID="XmlDataSource1"><ＩｔｅｍＴｅｍｐｌａｔｅ>
    <ａ href="#" id="mostrar" class="pp">Jolin護舊愛 信周董不沾賭
  <ｄｉｖ id="caja" >
       <ａhref="#" class="close">[x]<ａｓｐ:Label ID="Label1" runat="server" Text='<%#Eval("id") %>'>
       <ａｓｐ:Button ID="Button1" runat="server" Text="Button" />
       <ｉｎｐｕｔ id="Button2" type="button" value="button" />「Jolin」蔡依林昨天為新專輯辦慶功，對於舊愛「周董」周杰倫近來被爆泡賭場狂輸上億台幣，
       Jolin為他澄清：「應該不可能吧，有點誇張。」至於她與眾追求者進展得如何，是否交換了MSN帳號？
       她則笑著反問：「這很重要嗎？拒絕回答。」等同間接認了已經有人擁有她的帳號，彼此已邁入網交階段。
       慶30歲 申請1週生日假Jolin最近為新專輯連續工作4個月，又喊著想放長假，但她也知一切是「肖想」：
       「年底要辦演唱會，要放也是明年。」因此9月中乾脆藉生日名義，向公司申請1週假期，「畢竟是20歲嘛
       （實際為30歲），一定要慶祝。」
       今年希望追求者送鑽戒嗎？Jolin則說：「我自己買得起。」她坦言價錢不是重點，重要的是送的人。
       教折手舞 大嘴巴40哀嚎Jolin之前上CHANNEL[V]「音樂這個讚」，教大嘴巴40跳voguing舞，40勾不到
       手痛到哀哀叫，「好痛！這樣超像在復健的。」Jolin還淘氣上前拉他一把，讓已經滿頭大汗的40叫得
       更大聲，趁廣告空檔藉機尿遁。<／ｐ>
    <／ｄｉｖ>
    <／ＩｔｅｍＴｅｍｐｌａｔｅ><／ａｓｐ:Repeater>
    <ａ href="#" id="mostrar2">「非A型性格」求職最吃香<／ａ>
    <ｄｉｖ id="caja2">
       <ａ href="#" class="close">[x]<／ａ>
       <ｐ>經歷跳樓事件後，富士康重新招募員工，招考試題中，出現了有關抗壓特質的測試，例如「周圍有喧嚷聲，能不能馬上睡？」
       從題目看來，富士康想要測試，這些面試者對於一般人不太在意的事，是否也會產生激烈的壓力反應？也就是說，富士康很可能
       要找的是心理學中「非A型性格」的人。
       一九六○年代，兩位心臟科醫師費立德曼與羅森曼定義了「A型性格」的特性，他們發現容易罹患心血管疾病的人，通常具有一套
       共同的特質：傾向於工作狂熱、全力以赴，重視做事完美無缺，好競爭且懷有敵意，卻又害怕失敗。
       之後，心理學家研究發現，具有「A型性格」的特質，容易感受到壓力，如果他們感覺事情不在自己掌控之中，便會過分投入工作，
       時時刻刻都保持警戒，血壓也居高不下。
       反之，「非A型性格」即使在高壓的環境中，仍能不慌不忙、隨和易處，也沒有爭強好勝的壓力，在緊張之後，還能愉快的休息。
       也就是說，富士康希望新進的員工，他們的心理素質天生就比較能抗壓，即俗話說的「神經比較大條」，如此，當面對治軍嚴謹、
       一絲不苟、處處要找出細節裡的魔鬼富士康主管時，才承受得了。
       抗壓風並不是只有大陸，回頭看台灣，企業主面對突如其來的變化壓力，也有員工執著於求好心切而自殺，所以在人才募集，同樣
       有偏愛抗壓能力高者的趨勢。
       台灣的鴻海，徵才條件更早即趨向「高抗壓」。在富士康尚未發生跳樓事件前，鴻海宣稱，今年將有許多新計畫持續拓展，人才需
       求很大，希望找到抗壓性好「打不走、罵不退」的青年才俊。
       不只鴻海，近來新奇美、廣達、宏碁、英業達等科技大廠開出的徵才條件，不約而同，都把「抗壓性佳」列為必備資格。今年台積
       電徵才也突出了「抗壓力」這個主題，「台灣學生聰明程度不輸國外，但是抗壓明顯較弱。」台積電人力資源經理魏烈說，公司裡
       曾有博士提出想法時被多問幾句就失去自信；也有新人看到同事被責備，便難過起來，抗壓性不足。
       因此台積電的用人政策，除了看一般的IQ（智力商數）、EQ（情緒商數）外，更重視求職者的AQ（逆境商數），因為高科技業不斷
       追求技術領先，工作承受很大的壓力，逆境商數高者，才能面對劇烈變化。<／ｐ>
    <／ｄｉｖ>
    <ｐ><／ｐ>
    <ａ href="Default.aspx" id="webA">回首頁<／ａ>
       <ａｓｐ:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/XMLFile.xml">

   


~註解~
$(".pp")      //抓取class=pp的資料
$(this).next("div")    //抓取下一層資料中div元件
$("#mostrar2")        //抓取id=mostrar2的資料

~範例~
http://140.96.149.85/JQuery/WebJQuery.aspx