cerrar acordeon al iniciar la pagina jquery

[tico1]

Saludos, he revisado un poco y aunque vi temas con el acordeón de jquery no vi que se planteara este problema.

quisiera que en las páginas que muestro el acordeón el mismo aparezca cerrado al cargar la página y que se abra a medida que se valla haciendo click en el. es decir, si no se hace click en alguna de las opciones del acordeón, el mismo permanezca cerrado.
este es mi código:

<script type="text/javascript">
$(function() {
$("#accordion").accordion({
header: "h3",
alwaysOpen: false
});
});
</script>

<div class="demo" align="left" style="width:200px">
<div id="accordion">
<h3><a href="#">Agregar Vientre</a></h3>
<div>Contenido</div>
</div>
</div>

Gracias por su ayuda.
Alberto Patiño
Maracay - Venezuela

[hardvin]

Despues de crear el acordeon agrega esta linea de codigo


$('#link1').trigger('click');


Diciendo que link1 es el ID del hypervinculo que tienes en el primer item del accordion que tienes abierto



Amo Jquery ;) espero que te sirva ... aca un codigo de ejemplo


En el head tengo

Código:

	<script type="text/javascript">
	$(function() {
		$("#accordeon").accordion({
			collapsible: true
		});
		$('#link1').trigger('click');
	});
	</script>

En el boddy esta seria la estructura del accordeon

ensaya y me cuentas

Código:

<div id="accordeon">
	<h3><a id="link1" href="#">Agregar Nuevo Grupo</a></h3>
	<div style="text-align: center">

<table style="width: 582px">
    <tr>
        <td colspan="2" style="height: 21px; text-align: center">
            <asp:Label ID="Label11" runat="server" Text="INGRESE LOS SIGUIENTES DATOS "></asp:Label></td>
    </tr>
    <tr>
        <td style="width: 274px; text-align: right">
            <asp:Label ID="lblGrupo" runat="server" Text="Nombre del Grupo (*)" Width="184px"></asp:Label></td>
        <td style="width: 315px">
            <asp:TextBox ID="txtNomgrupo" runat="server" Width="304px"></asp:TextBox></td>
    </tr>
    <tr>
        <td style="width: 274px; text-align: right">
            <asp:Label ID="Label2" runat="server" Text="Descripcion Generica 1" Width="157px"></asp:Label></td>
        <td style="width: 315px">
            <asp:TextBox ID="txtGen1" runat="server" Width="304px"></asp:TextBox></td>
    </tr>
    <tr>
        <td style="width: 274px; text-align: right">
            <asp:Label ID="Label3" runat="server" Text="Descripcion Generica 2"></asp:Label></td>
        <td style="width: 315px">
            <asp:TextBox ID="txtGen2" runat="server" Width="304px"></asp:TextBox></td>
    </tr>
    <tr>
        <td style="width: 274px; text-align: right">
            <asp:Label ID="Label4" runat="server" Text="Descripcion Generica 3"></asp:Label></td>
        <td style="width: 315px">
            <asp:TextBox ID="txtGen3" runat="server" Width="304px"></asp:TextBox></td>
    </tr>
    <tr>
        <td style="width: 274px; text-align: right; height: 21px;">
            <asp:Label ID="Label5" runat="server" Text="Descripcion Generica 4"></asp:Label></td>
        <td style="width: 315px; height: 21px;">
            <asp:TextBox ID="txtGen4" runat="server" Width="304px"></asp:TextBox></td>
    </tr>
    <tr>
        <td style="width: 274px; text-align: right">
            <asp:Label ID="Label6" runat="server" Text="Descripcion Generica 5"></asp:Label></td>
        <td style="width: 315px">
            <asp:TextBox ID="txtGen5" runat="server" Width="304px"></asp:TextBox></td>
    </tr>
    <tr>
        <td style="width: 274px; text-align: right">
            <asp:Label ID="Label7" runat="server" Text="Descripcion Generica 6"></asp:Label></td>
        <td style="width: 315px">
            <asp:TextBox ID="txtGen6" runat="server" Width="304px"></asp:TextBox></td>
    </tr>
    <tr>
        <td style="width: 274px; height: 21px; text-align: right">
            <asp:Label ID="Label8" runat="server" Text="Descripcion Generica 7"></asp:Label></td>
        <td style="width: 315px; height: 21px">
            <asp:TextBox ID="txtGen7" runat="server" Width="304px"></asp:TextBox></td>
    </tr>
    <tr>
        <td style="width: 274px; text-align: right">
            <asp:Label ID="Label9" runat="server" Text="Descripcion Generica 8"></asp:Label></td>
        <td style="width: 315px; text-align: left;">
            <asp:TextBox ID="txtGen8" runat="server" Width="304px"></asp:TextBox></td>
    </tr>
    <tr>
        <td style="width: 274px; height: 21px; text-align: right">
            <asp:Label ID="Label10" runat="server" Text="Descripcion Generica 9"></asp:Label></td>
        <td style="width: 315px; height: 21px; text-align: left;">
            <asp:TextBox ID="txtGen9" runat="server" Width="304px"></asp:TextBox></td>
    </tr>
    <tr>
        <td style="width: 274px; text-align: right">
            <asp:Label ID="Label1" runat="server" Text="Descripcion Generica 10"></asp:Label></td>
        <td style="width: 315px; text-align: left;">
            <asp:TextBox ID="txtGen10" runat="server" Width="304px"></asp:TextBox></td>
    </tr>
    <tr>
        <td colspan="2" style="height: 21px; text-align: center">
            <asp:Button ID="btnGuardar" runat="server" Text="Guardar" OnClick="btnGuardar_Click" />
        </td>
    </tr>
</table>
</div>
</div>

Fijate muy bien en el Punto clave del segundo codigo

Código:

<div id="accordeon">
	<h3><a id="link1" href="#">Agregar Nuevo Grupo</a></h3>

ahi le coloco el ID del que quiero mandarle el clic via JQuery

Espero haberte ayudado

[noexisto]

Hey! Gracias, a mi me sirvió. Aunque si hubiese alguna forma de evitar que se abra al inicio, en lugar de cerrarlo luego de abrirse, sería genial.

Nuevamente gracias.

[tredio]

leyendo la api del accordion creo que esta funcion puede ayudarte

http://docs.jquery.com/UI/Accordion#option-active

prueba poniendo su valor en null a ver que pasa.

[mosquera_f]

Si bien ya es un post antiguo, les dejo la solución:

Código:

$(document).ready(function() {
      $("#accordion").accordion({ active: false });
});

basicamente es setear la opción 'active' en 'false'.

Saludos,
Fernando.
www.mundialsys.com

[molinapirata]

Esta es la solución que me vino bien:
$( "#accordion" ).accordion({
active: false,
collapsible: true
});
Saludos