Belajar menggunakan Accordian (Ajax control toolkit) pada ASP .NET

• Tambahkan Code berikut pada source halaman web pada bagian paling atas. Code ini digunakan untuk mengenali AjaxControlToolkit yang kita tambahkan ke toolbox kita. Maka jika kita menambahkan AjaxControlToolkit pada halaman web kita akan didahului dengan prefix

• Untuk menggunakan Accordian kita harus mengetikkan sendiri pada SourceCode karena pada design kita tidak akan menemui accordian yang kita tambahkan.
• Berikut contoh simple sebuah Accordian

• Hasilnya sebagai berikut saat mengeclick pada tulisan pertama maka akan muncul tulisan Accordian pertama, saat mengeclick kedua akan muncul Accordian kedua disertai animasi.

• Kita akan mencoba membuat Accordian yang lebih expert dengan disertai CSS
• Tambahkan CSS pada head sebagai berikut :

<style type="text/css">

.accordionHeader

{

border: 0px solid #2F4F4F;

color: white;

background-color: #A3B26F;

font-family:Tahoma;

font-size: 12px;

font-weight: bold;

padding: 5px;

margin-top: 5px;

cursor: pointer;

}

.accordionHeader:hover

{

text-decoration:underline;

}

.accordionContent

{

background-color:White;

font-family:Tahoma;

font-size: 10px;

color:Black;

border: 1px inset #A3B26F;

border-top: none;

padding: 5px;

padding-top: 10px;

text-decoration:none;

}

.accordionContent:hover

{

text-decoration:underline;

}

.accordionLink

{

background-color:Transparent;

text-decoration:none;

color:White;

}

style>

• Kemudian Pada body tuliskan code berikut :

• Hasilnya akan seperti berikut :