Ejemplo de como crear acordeon con Ajax Control Toolkit con Asp.net Visual Studio

En este tutorial aprenderemos a crear un acordeon para mostrar diferentes resultados de una forma mas interactiva.

Lo primero que necesitamos es agregar la referencia de AjaxControlToolkit, esta la podemos descargar de la siguiente manera,damos clic derecho en el proyecto y seleccionamos Administrar paquetes NuGet :

nuget-ajax-control -toolkit-2

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

En la ventana buscamos Ajax Tool Script

nuget-ajax-control-toolkit-1

 

Damos clic en instalar y nos aparecerá una ventana como la siguiente :

 

nuget-ajax-control-toolkit-3

 

Después de instalar la librería, necesitamos agregarla como referencia al proyecto:

nuget-ajax-control-toolkit-4

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Buscamos en nuestro proyecto en la carpeta BIN la dll :

nuget-ajax-control-toolkit-5

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Después de agregar la librería vamos a la pagina donde deseamos hacer el acordeón y agregamos en el formulario el siguiente código :

Despues de la etiqueta FORM <form id=”form1″ runat=”server”>
<ajaxtoolkit:toolkitscriptmanager id="ToolKitScriptManager" runat="server"></ajaxtoolkit:toolkitscriptmanager>

Este nos permitirá usar la librería que acabamos de importar, despues de esto agregamos el la etiqueta de acordeón que es la siguiente :

<ajaxtoolkit:accordion id="Acordeon" runat="server" selectedindex="0" headercssclass="accordionHeader" headerselectedcssclass="accordionHeaderSelected"contentcssclass="accordionContent" fadetransitions="false" framespersecond="40" transitionduration="250"autosize="None" requireopenedpane="false" suppressheaderpostbacks="true" width="500px"> <panes>

A continuación agregamos tantos item como necesitemos :

Despues de añadir los item que llevará nuestro acordeón lo cerramos de la siguiente forma :

Veremos nuestro acordeón de la siguiente forma:

acordeon-ajax-toolkit

 

 

 

 

 

Vamos a darle formato con css :

Y lo veremos de la siguiente manera :

acordeon-ajax-toolkit-2

 

 

 

 

 

 

 

 

Espero les sea de utilidad, cualquier duda pueden escribirla, saludos.