JQuery - Cambiar [+] por [-] en desplegable.

Cambiar [+] por [-] en desplegable.

Publicado por Pablo (6 intervenciones) el 29/03/2015 12:25:28

Lo he visto en algunos sitios:
Cuando puedes desplegar un listado el icono que aparece es [+] y cuando quieres contraer ese listado el icono es [-].
He estado buscando en un montón de sitios, pero no encuentro nada parecido.
Mi intención es anidarlo a una función toggle() y que despliegue o contraiga una consulta.
¿Alguien me podría indicar una función o plug-in de jquery para hacer esto?

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 1

Val: 302

Cambiar [+] por [-] en desplegable.

Publicado por xve (673 intervenciones) el 29/03/2015 19:50:46

Hola Pablo, hacer el toggle() con una especie de botón, no es tan complicado...

<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>toggle demo</title>

    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

    <style>

    #opcion span {

        border:1px solid;padding:5px;background-color:#ccc;

        text-align:center;

        display:inline-block;

        width:22px;

        cursor:pointer;

    </style>

</head>

<body>

<div id="opcion">

    <span>+</span>

    <span style="display: none">-</span>

</div>

<script>

$("#opcion").click(function() {

    $("span").toggle();

});

</script>

</body>

</html>

Cuando dices que estraiga una consulta, exactamente a que te refieres? a una lista?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Cambiar [+] por [-] en desplegable.

Publicado por Pablo (6 intervenciones) el 29/03/2015 23:23:57

Sí, me refiero a una lista.
En bootstrap los iconos se llaman: glyphicon glyphicon-plus y glyphicon glyphicon-minus, y lo necesito para dar la sensación de lista que se puede desplegar o lista que se puede plegar.
Lo que me propones tiene sentido.
Usar glyphicon glyphicon-minus con la lista desplegada y oculto por defecto, y hacer una función que muestre la lista.
Coy a probar a ver qué sale.
Gracias.

Valora esta respuesta

Comentar

Sumar en tie4mpo real con javascrip y php

Importar con Intel XDK aplicacion HTML5-PHP en servidor Web