Tak programistycznie, in Polish and English

Pierwszy krok to stworzenie Accordiona na którym będziemy się opierać.

<ajaxToolkit:Accordion runat="server" ID="mojAccordion">
<Panes>
<ajaxToolkit:AccordionPane runat="server">
<Header>Nagłówek 1</Header>
<Content>Zawartość 1</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane runat="server">
<Header>Nagłówek 2</Header>
<Content>Zawartość 2</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane runat="server">
<Header>Nagłówek 3</Header>
<Content>Zawartość 3</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>

Teraz możemy zabrać się za formatowanie naszego obiektu. Pierwsze co możemy dodać to SelectedIndex , właściwość ta określa który z naszych paneli będzie wyświetlany domyślnie podczas ładowania strony.

Następnie żeby nasze panele nie wyglądały tak sucho możemy przypisać im klasy CSS. Możemy to zrobić dla całego Accordion lub dla osobnych paneli. Przypisuje się je wartościom HeaderCssClass (dla nagłówków paneli) oraz ContentCssClass (dla zawartości paneli).

<ajaxToolkit:Accordion runat="server" ID="mojAccordion"
SelectedIndex="2" ContentCssClass="zawartoscCSS">
<Panes>
<ajaxToolkit:AccordionPane runat="server" HeaderCssClass="naglowekCSS1">
<Header>Nagłówek 1</Header>
<Content>Zawartość 1</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane runat="server" HeaderCssClass="naglowekCSS2">
<Header>Nagłówek 2</Header>
<Content>Zawartość 2</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane runat="server" HeaderCssClass="naglowekCSS3">
<Header>Nagłówek 3</Header>
<Content>Zawartość 3</Content>
</ajaxToolkit:AccordionPane>

A tak wyglądają klasy CSS dla powyższego kodu.

<style type="text/css">
.naglowekCSS1 { color : red ; font-size : large ; background-color : black}
.naglowekCSS2 {color : gold; font-size : large}
.naglowekCSS3 {color : green; font-size : large}
.zawartoscCSS { color : blue ; font-size : small ; background-color : grey}
</style>

Kolejny element do ustawienia to AutoSize odpowiadający za rozwijanie naszych paneli. Ustawienie wartości None spowoduje, że panele będą się rozwijać bez ograniczeń co może wpłynąć na ułożenie innych elementów na stronie. Wartość Limit zezwala na rozwijanie do określonego rozmiaru ustawianego przez parametr Height, w wypadku gdy zawartość panelu nie zmieści się będzie można ją przewijać. Ostatnia możliwość to Fill, ustalona wartość Height powoduje rozciąganie Accordiona i wymusza stały rozmiar tego elementu.

FadeTransition odpowiada za efekt wygaszania podczas przejścia pomiędzy panelami, jeśli ustawiona jest wartość false wykonywane są standardowe przełączenia pomiędzy panelami. Dwie kolejne właściwości odpowiadają za czas animacji podczas przełączania paneli oraz ilość klatek na sekundę, TransitionDuration i FramesPerSecond.

<ajaxToolkit:Accordion runat="server" ID="mojAccordion"
SelectedIndex="2" ContentCssClass="zawartoscCSS" AutoSize="None"
FadeTransitions="true" TransitionDuration="2000" FramesPerSecond="35">

Po odpowiednim ustawieniu wszystkich parametrów będziemy mieli śliczny Accordion. Najłatwiej da się zaobserwować efekty przejść pomiędzy panelami jeśli zawartość paneli jest dosyć spora. Może to być kilka, kilkanaście linijek tekstu albo jakiś plik graficzny.

Miłego korzystania i owocnej pracy.

Pełny kod do artykułu można pobrać tutaj.

Pokój