Boton de ocultar todo
Publicado por Martin (3 intervenciones) el 31/07/2015 21:38:34
Hola, mi consulta es simple para alguien que sabe jQuery como ustedes, yo solo programo en PHP y me tope con un treeview hecho con CSS y animado con jQuery, el único problema es que no se hacer un botón de MOSTRAR TODO o OCULTAR TODO, solo tengo el de CAMBIAR VISTA, lo que hace es muestra lo que está oculto y oculta lo que está a la vista… yo deseo que se expanda todo o se oculte todo.
Me podrían ayudar hacer ese botón?
Ejecmplo: http://n9000241.ferozo.com/tree/
Me podrían ayudar hacer ese botón?
Ejecmplo: http://n9000241.ferozo.com/tree/
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pure CSS Tree</title>
<link href="tree.css" type="text/css" rel="stylesheet" />
<script src="jquery-1.11.3.min.js" type="text/javascript" > </script>
<script type="text/javascript">
$( document ).ready( function( ) {
$( '.tree li' ).each( function() {
if( $( this ).children( 'ul' ).length > 0 ) {
$( this ).addClass( 'parent' );
}});
$( '.tree li.parent > a' ).click( function( ) {
$( this ).parent().toggleClass( 'active' );
$( this ).parent().children( 'ul' ).slideToggle( 'fast' );
});
$( '#all' ).click( function() {
$( '.tree li' ).each( function() {
$( this ).toggleClass( 'active' );
$( this ).children( 'ul' ).slideToggle( 'fast' );
});
});
});
</script>
</head>
<body>
<div class="content">
<button id="all">CAMBIAR VISTA</button>
<ul class="tree">
<li><a>Parent 1</a></li>
<li><a>Parent 2</a></li>
<li>
<a>Parent 3</a>
<ul>
<li>
<a>1st Child of 3</a>
<ul>
<li><a>1st grandchild</a></li>
<li><a>2nd grandchild</a></li>
</ul>
</li>
<li><a>2nd Child of 3</a></li>
<li><a>3rd Child of 3</a></li>
</ul>
</li>
<li>
<a>Parent 4</a>
<ul><li><a>Parent 4's only child</a></li></ul>
</li>
</ul>
</div>
</body>
</html>Valora esta pregunta
0
