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

   
Vista:

Cambiar [+] por [-] en desplegable.

Publicado por Pablo (5 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 claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Cambiar [+] por [-] en desplegable.

Publicado por xve (557 intervenciones) el 29/03/2015 19:50:46
Hola Pablo, hacer el toggle() con una especie de botón, no es tan complicado...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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 claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Cambiar [+] por [-] en desplegable.

Publicado por Pablo (5 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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar