Często na stronie www chcemy umieścić elementy, które powinny być domyślnie zwinięte aby zajmowały mniej miejsca. Na przykład na tej stronie zdecydowałem, że filtrowanie wyników powinno domyślnie być schowane aby zajmowało mniej miejsca. Klikając na link “Pokaż\Ukryj” użytkownik może rozwinąć okno. Warto również zwrócić uwagę na animacje – okno nie pojawia się od razu ale stopniowo jest rozszerzane.

Zaprezentowany wynik można łatwo uzyskać za pomocą biblioteki jQuery. Po ściągnięciu biblioteki oraz podłączeniu stosownych plików JS należy napisać następujący skrypt:

<script type="text/javascript">
    $(document).ready(function () {        
        $("#msg_body").hide();            
    });
</script>

Metoda hide (ukrycie formularza) zostanie wywoła w momencie zainicjowania biblioteki jQuery. Selektor #msg_body oznacza wybranie elementu w którym atrybut id jest równy msg_body. Następnie można przejść do zdefiniowania reszty formularza:

<%using(Html.BeginForm("Search","Politicians",FormMethod.Get)){ %>

<div id="msg_head">

    <a onclick='javascript:$("#msg_body").slideToggle(600);return false' href='#' class="marked_link">
        <img  src="/images/search.png" alt="Filtrowanie" style="float:left" />Filtrowanie (Pokaż\Ukryj)
    </a>

</div>
    
<br />
<div id="msg_body">
    <fieldset>

        <legend>Filtrowanie</legend>
        <p>Imię:
            <br />
            <%=Html.TextBox("FirstName", Request.QueryString["FirstName"]) %>
        </p>

        <p>Drugie imię:
            <br />
            <%=Html.TextBox("SecondName", Request.QueryString["SecondName"]) %>
        </p>

        <p>Nazwisko:
            <br />
            <%=Html.TextBox("LastName", Request.QueryString["LastName"]) %>
        </p>
        <input type=submit value="Filtruj" />
    </fieldset>
</div>
<%} %>

Element div z id równym msg_body zawiera dane, które będą zwijanie oraz rozwijane. Z kolei w msg_head został umieszczony link odpowiedzialny za wykonanie operacji. W zdarzeniu OnClick umieszczono następujący kod JS:

'javascript:$("#msg_body").slideToggle(600);return false'

Kluczem do sukcesu jest metoda slideToggle, która odpowiada za animację zwijania lub rozwijania. Jako parametr wejściowy można przekazać całkowity czas animacji.