jquery: acortar código de slideToggle...

hector2c · #1 (**permalink**) 18/09/2008, 08:28

tengo el siguiente código que trabaja muy bien, trata de:

son toogles, div que se alargan y encojen con un click... todo trabaja muy bien, lo que necesito poder minimizar el código, (en caso se pueda), minimizar el script, de modo que unas cuantas lineas de código se adapten para n numeros de enlaces y divs.

me explico mejor, imaginen que necesite 15 divs desplegables, deberia agregar 15 scripts para cada uno de los divs desplegables ???, o hay un modo de ahorrar codigo?...

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<script language="javascript" type="text/javascript" src="../extras/js/jquery/jquery-1.2.6.min.js.js"></script>
  <script>
  $(document).ready(function(){
    
		$("#p_uno").hide();
		$("#p_dos").hide();
		$("#p_tres").hide();

    $("#button_uno").click(function () {
      $("#p_uno").slideToggle("normal");
    });

    $("#button_dos").click(function () {
      $("#p_dos").slideToggle("normal");
    });

    $("#button_tres").click(function () {
      $("#p_tres").slideToggle("normal");
    });

  });
  </script>
  <style>
		div.toggle { background:#def3ca; margin:10px; width:600px; 
	    padding: 10px; text-align:center; cursor: hand }
		div.contenido_toggle {
		  background:#fff; margin:10px; width:600px; 
	    padding: 10px;	  
		}
  </style>

</head>

<body>
  <div class="toggle" id="button_uno">mirar unos</div>
  <div class="contenido_toggle" id="p_uno">
    <p>Internet es un conjunto descentralizado de redes de comunicación interconectadas, que utilizan la familia de protocolos TCP/IP, garantizando que las redes físicas heterogéneas que la componen funcionen como una red lógica única, de alcance mundial. Sus orígenes se remontan a 1969, cuando se estableció la primera conexión de computadoras, conocida como ARPANET, entre tres universidades en California y una en Utah, EE. UU..</p>
  </div>
  <div class="toggle" id="button_dos">mirar dos</div>
  <div class="contenido_toggle" id="p_dos">
    <p>Internet es un conjunto descentralizado de redes de comunicación interconectadas, que utilizan la familia de protocolos TCP/IP, garantizando que las redes físicas heterogéneas que la componen funcionen como una red lógica única, de alcance mundial. Sus orígenes se remontan a 1969, cuando se estableció la primera conexión de computadoras, conocida como ARPANET, entre tres universidades en California y una en Utah, EE. UU..</p>
  </div>
  <div class="toggle" id="button_tres">mirar tres</div>
  <div class="contenido_toggle" id="p_tres">
    <p>Internet es un conjunto descentralizado de redes de comunicación interconectadas, que utilizan la familia de protocolos TCP/IP, garantizando que las redes físicas heterogéneas que la componen funcionen como una red lógica única, de alcance mundial. Sus orígenes se remontan a 1969, cuando se estableció la primera conexión de computadoras, conocida como ARPANET, entre tres universidades en California y una en Utah, EE. UU..</p>
  </div>
</body>
</html>

espero su ayuda, muchas gracias n________n

David · #2 (**permalink**) 18/09/2008, 12:51

Tal vez podrías asignar un id con un numeral consecutivo a cada div. Por ejemplo: p_1, p_2, p_3, etc.

Y para la asignación recorres todos los divs con un bucle for.

#3 (**permalink**) 19/09/2008, 02:33

Otra solución es, en lugar de usar los ids de los <div>s, seleccionar según la clase que es común.

Algo de este estilo...

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<script language="javascript" type="text/javascript" src="../extras/js/jquery/jquery-1.2.6.min.js.js"></script>
  <script>
    $(document).ready(function(){
        //Escondemos todos los div con class="contenido_toggle":
        $(".contenido_toggle").hide();

        // Asignamos los eventos a todos los div con class="toggle":
        $(".toggle").click(function () {
            //El div a ocultar o mostrar es: el siguiente a este que tenga class="contenido_toggle".
            $(this).next(".contenido_toggle").slideToggle("normal");
        });
    });
  </script>
  <style>
        div.toggle {
            background:#def3ca; margin:10px; width:600px; 
            padding: 10px; text-align:center; cursor: hand
        }
        div.contenido_toggle {
            background:#fff; margin:10px; width:600px; 
            padding: 10px;	  
        }
  </style>

</head>

<body>
  <div class="toggle" id="button_uno">mirar unos</div>
  <div class="contenido_toggle" id="p_uno">
    <p>Internet es un conjunto descentralizado de redes de comunicación interconectadas, que utilizan la familia de protocolos TCP/IP, garantizando que las redes físicas heterogéneas que la componen funcionen como una red lógica única, de alcance mundial. Sus orígenes se remontan a 1969, cuando se estableció la primera conexión de computadoras, conocida como ARPANET, entre tres universidades en California y una en Utah, EE. UU..</p>
  </div>
  <div class="toggle" id="button_dos">mirar dos</div>
  <div class="contenido_toggle" id="p_dos">
    <p>Internet es un conjunto descentralizado de redes de comunicación interconectadas, que utilizan la familia de protocolos TCP/IP, garantizando que las redes físicas heterogéneas que la componen funcionen como una red lógica única, de alcance mundial. Sus orígenes se remontan a 1969, cuando se estableció la primera conexión de computadoras, conocida como ARPANET, entre tres universidades en California y una en Utah, EE. UU..</p>
  </div>
  <div class="toggle" id="button_tres">mirar tres</div>
  <div class="contenido_toggle" id="p_tres">
    <p>Internet es un conjunto descentralizado de redes de comunicación interconectadas, que utilizan la familia de protocolos TCP/IP, garantizando que las redes físicas heterogéneas que la componen funcionen como una red lógica única, de alcance mundial. Sus orígenes se remontan a 1969, cuando se estableció la primera conexión de computadoras, conocida como ARPANET, entre tres universidades en California y una en Utah, EE. UU..</p>
  </div>
</body>
</html>

hector2c · #4 (**permalink**) 19/09/2008, 21:45

venkman, hola, excelente, muchas gracias por la ayuda, era lo que necesitaba, muchas gracias n______n, soy nuevo en jQuery, me va agradando cada dia mas en verdad te estoy muy agradecido, jejeje, olvide que se pueden usar los .class ...