Boton de ocultar todo

fmanfredi · #1 (**permalink**) 31/07/2015, 13: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/

Código HTML:

<!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>

Alexis88 · #2 (**permalink**) 31/07/2015, 15:30

Échale un vistazo a esto. Mira los últimos ejemplos.

Saludos