Foros del Web » Programando para Internet » Jquery »

cerrar acordeon al iniciar la pagina jquery

Estas en el tema de cerrar acordeon al iniciar la pagina jquery en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/03/2009, 12:39
 
Fecha de Ingreso: noviembre-2007
Mensajes: 4
Antigüedad: 12 años, 2 meses
Puntos: 1
cerrar acordeon al iniciar la pagina jquery

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
  #2 (permalink)  
Antiguo 25/08/2010, 16:08
 
Fecha de Ingreso: enero-2010
Ubicación: Colombia
Mensajes: 6
Antigüedad: 10 años
Puntos: 0
De acuerdo Respuesta: cerrar acordeon al iniciar la pagina jquery

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
  #3 (permalink)  
Antiguo 21/09/2010, 11:42
 
Fecha de Ingreso: marzo-2007
Mensajes: 19
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: cerrar acordeon al iniciar la pagina jquery

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.
  #4 (permalink)  
Antiguo 21/09/2010, 11:59
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 11 años, 2 meses
Puntos: 66
Respuesta: cerrar acordeon al iniciar la pagina jquery

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.
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #5 (permalink)  
Antiguo 01/06/2011, 12:24
 
Fecha de Ingreso: diciembre-2010
Mensajes: 2
Antigüedad: 9 años
Puntos: 2
Respuesta: cerrar acordeon al iniciar la pagina jquery

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
  #6 (permalink)  
Antiguo 30/09/2013, 03:00
 
Fecha de Ingreso: enero-2009
Ubicación: badajoz
Mensajes: 8
Antigüedad: 11 años
Puntos: 0
Respuesta: cerrar acordeon al iniciar la pagina jquery

Esta es la solución que me vino bien:
$( "#accordion" ).accordion({
active: false,
collapsible: true
});
Saludos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 05:23.