ဘေလာ့မွာအလြယ္ကူဆံုး Accordion Menu သံုးခ်င္ရင္

အခုတင္တာေလးကေတာ့ဘေလာ့မွာအလြယ္ကူဆံုးAccordionMenuသံုးခ်င္တဲ့ဘေလာ့မိတ္ေဆြေတြအတြက္ပါ။ကုဒ္သစ္ေလးလို႕ေျပာရင္ရပါတယ္။

Design>>>Add a Gadget>>>HTML/JavaScript မွာေအာက္ကကုဒ္ကိုထည့္ေပးလိုက္ပါ။

<!-kp-3နည္းပညာ-http://kp3family.blogspot.com--> <style type="text/css"> h5 { font-family: arial, trebuchet-ms, tahoma; font-size: 13px; font-weight:bold; padding: 0 0 1em; color: #ffffff; } .msg_list { list-style: none; padding: 0; margin: 0; width: 100%; } .msg_head { padding: 5px 10px; cursor: pointer; position: relative; margin:1px; background-color: #6D7B8D; } .msg_body { padding: 5px 10px 15px; background-color: #98AFC7; } </style> <script type="text/javascript" src=" https://sites.google.com/site/teknikbuatblog/tbb/menuaccordion.js?attredirects=0&d=1 "></script> <script type="text/javascript"> $(document).ready(function() { //hide the all of the element with class msg_body $(".msg_body").hide(); //slides the element with class "msg_body" when paragraph with class "msg_head" is clicked $("#firstpane h5.msg_head").click(function() { $(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow"); }); //slides the element with class "msg_body" when mouse is over the paragraph $("#secondpane h5.msg_head").mouseover(function() { $(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow"); }); }); </script> <div class="msg_list" id="secondpane"> <h5 class="msg_head">ဒီမွာေခါင္းစဥ္ေရးပါ</h5> <div class="msg_body"> ေခါင္းစဥ္ရဲ႕ကုဒ္ထည့္ရန္ </div> <h5 class="msg_head">ဒီမွာေခါင္းစဥ္ေရးပါ</h5> <div class="msg_body"> ေခါင္းစဥ္ရဲ႕ကုဒ္ထည့္ရန္ <h5 class="msg_head">ဒီမွာေခါင္းစဥ္ေရးပါ</h5> <div class="msg_body"> ေခါင္းစဥ္ရဲ႕ကုဒ္ထည့္ရန္ </div> </div> <!--kp3Accordion Menu-http://kp3family.blogspot.com-->

Credit : kp3(နည္းပညာ)