Merhabalar,Yeni başlayanlar için SPRY serileri devam ediyor.Buradave burada spry yazıları yazmıştık. Şimdiki serimizde SPRY ile Accordion paneller oluşturacağız. Yani akordiyon şeklinde açılan paneller. Kodumuza gelelimvar Accordion1 = new Spry.Widget.Accordion(“akordiyon”);
Burada akordiyon id’li div imizi akordiyon olarak tanımlıyoruz. HTML tarafında iseakordiyon

Akordiyon 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo, tellus sit amet luctus pulvinar, felis nibh congue eros, nec mattis ante dolor non est. Morbi at orci. Sed ultrices. Suspendisse luctus euismod tellus. Aliquam tellus. Nullam condimentum purus id leo. In et mi at purus tempus congue. Cras a elit quis risus facilisis volutpat. Ut scelerisque urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lectus lacus, blandit at, ornare non, laoreet vel, nisi. Curabitur et sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc sagittis. Integer sed sem a quam tincidunt volutpat. Donec tortor. Integer convallis. Maecenas sodales leo at nisi.
Akordiyon 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo, tellus sit amet luctus pulvinar, felis nibh congue eros, nec mattis ante dolor non est. Morbi at orci. Sed ultrices. Suspendisse luctus euismod tellus. Aliquam tellus. Nullam condimentum purus id leo. In et mi at purus tempus congue. Cras a elit quis risus facilisis volutpat. Ut scelerisque urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lectus lacus, blandit at, ornare non, laoreet vel, nisi. Curabitur et sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc sagittis. Integer sed sem a quam tincidunt volutpat. Donec tortor. Integer convallis. Maecenas sodales leo at nisi.
Akordiyon 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo, tellus sit amet luctus pulvinar, felis nibh congue eros, nec mattis ante dolor non est. Morbi at orci. Sed ultrices. Suspendisse luctus euismod tellus. Aliquam tellus. Nullam condimentum purus id leo. In et mi at purus tempus congue. Cras a elit quis risus facilisis volutpat. Ut scelerisque urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lectus lacus, blandit at, ornare non, laoreet vel, nisi. Curabitur et sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc sagittis. Integer sed sem a quam tincidunt volutpat. Donec tortor. Integer convallis. Maecenas sodales leo at nisi.



Yine kodu incelediğimizde <div class=”AccordionPanelContent”></div> arasına akordiyon panelimizin içeriğini gireceğiz. Ben oraları lorem ipsumlarla doldurdum.<div class=”AccordionPanel”></div> arasında Yenibir akordiyon panel tanımlıyoruz. Yani yeni bir içerik.<div class=”AccordionPanelTab”></div> arasında ise bu panelin başlığını yazıyoruz.Gelelim CSS kısmına@charset “UTF-8”;.Accordion {border-left: solid 1px gray;border-right: solid 1px black;border-bottom: solid 1px gray;overflow: hidden;}.AccordionPanel {margin: 0px;padding: 0px;background-color: #0FF;}.AccordionPanelTab {background-color: #CCCCCC;border-top: solid 1px black;border-bottom: solid 1px gray;margin: 0px;padding: 2px;cursor: pointer;-moz-user-select: none;-khtml-user-select: none;}.AccordionPanelContent {overflow: auto;margin: 0px;padding: 0px;height: 200px;}.AccordionPanelOpen .AccordionPanelTab {background-color: #EEEEEE;}.AccordionPanelTabHover {color: #555555;}.AccordionPanelOpen .AccordionPanelTabHover {color: #555555;}.AccordionFocused .AccordionPanelTab {background-color: #3399FF;}.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {background-color: #33CCFF;}
Buralarda ise classlar oluşturulmuş. Bunları kafanıza göre düzenleyebilirsiniz. <div> lerin içindeki class değerlerine bakarak istediğinizi oluşturabilirsiniz. Son olarak demo için