En este artículo, aprenderemos cómo mantener jQuery UI Accordion colapsado de forma predeterminada. Esto se puede hacer configurando la propiedad ‘activa’ de jQuery Accordion como falsa.
Acordeón: es una forma de mostrar paneles de contenido colapsables para presentar información en un espacio limitado. Al hacer clic en cada panel, podemos ver el contenido en él y, al usar la función de alternar, puede colapsar el panel de contenido.
La opción Acordeón activo indica qué índice del menú de acordeón se abrirá cuando se acceda a la página. Por defecto, el valor es 0, es decir, el primer panel del menú. Cuando la opción activa se establece en falso, colapsará todos los paneles.
Consulte el artículo Opción activa jQueryUI Accordion para obtener más detalles.
Sintaxis:
$( "Selector" ).accordion();
Acercarse:
En primer lugar, agregue jQuery y JQuery UI CDN al script o descárguelos a su máquina local.
<enlace rel=”hoja de estilo” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dark-hive/jquery-ui.css”> <script src=”http: //code.jquery.com/jquery-2.1.3.js”></script> <script src=”http://code.jquery.com/ui/1.11.2/jquery-ui.js”>< /script>
Cree un div en el cuerpo del cuadro de diálogo y mantenga el id como demoAccordion .
En el div demoAccordion, agregue 3 div que serán paneles del acordeón.
Ahora, utilizando el método jQuery accordion(), cree el acordeón y mantenga la propiedad contraíble como verdadera.
$("#demoAccordion").accordion({ collapsible: true });
Ejemplo: este ejemplo describe el colapso de jQuery UI Accordion, especificando su valor como verdadero.
HTML
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Accordion</title>
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href=
"https://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src=
"https://code.jquery.com/jquery-2.1.3.js">
</script>
<script src=
"https://code.jquery.com/ui/1.11.2/jquery-ui.js">
</script>
<script>
$(document).ready(function() {
$("#demoAccordion").accordion({
collapsible: true
});
});
</script>
</head>
<body>
<div id="demoAccordion">
<h2>
<a href="#">Python</a>
</h2>
<div>
Python is a popular programming language.
Python can be used on a server to create
web applications.
</div>
<h2>
<a href="#">Java</a>
</h2>
<div>
Java is a popular programming language.
Java is used to develop mobile apps,
web apps, desktop apps, games and much more.
</div>
<h2>
<a href="#"> C language </a>
</h2>
<div>
C is considered as a middle-level language
because it supports the feature of both
low-level and high-level languages
</div>
</div>
</body>
</html>
Producción:
Ahora, veremos cómo crear el jQuery UI Accordion colapsado, por defecto. Para crear un acordeón que esté colapsado de forma predeterminada, debemos establecer la propiedad ‘activa’ de jQuery Accordion como falsa.
Sintaxis:
$("#demoAccordion").accordion({ collapsible: true, active: false});
Acercarse:
- Cree un div en el cuerpo, para el cuadro de diálogo y mantenga la identificación como demoAccordion .
- En el div demoAccordion, agregue 3 div que serán paneles del acordeón.
- Ahora, utilizando el método jQuery accordion(), cree el acordeón y mantenga la propiedad contraíble como verdadera.
- Establezca la propiedad activa en falso Para que el acordeón se colapse, de forma predeterminada.
Ejemplo: este ejemplo describe el colapso de jQuery UI Accordion, estableciendo la propiedad activa como falsa.
HTML
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Accordion</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src=
"https://code.jquery.com/jquery-2.1.3.js">
</script>
<script src=
"https://code.jquery.com/ui/1.11.2/jquery-ui.js">
</script>
<script>
$(document).ready(function() {
// Setting jquery accordion active property to false
$("#demoAccordion").accordion({
collapsible: true,
active: false
});
});
</script>
</head>
<body>
<div id="demoAccordion">
<h2>
<a href="#">Python</a>
</h2>
<div>
Python is a popular programming language.
Python can be used on a server to create
web applications.
</div>
<h2>
<a href="#">Java</a>
</h2>
<div>
Java is a popular programming language.
Java is used to develop mobile apps,
web apps, desktop apps, games and much more.
</div>
<h2>
<a href="#"> C language </a>
</h2>
<div>
C is considered as a middle-level language
because it supports the feature of both
low-level and high-level languages
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por pulamolusaimohan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA