Alternar Jquery - expandir / colapsar en varios divs - jquery

Recientemente encontré un código Jquery muy fácil de usar, que básicamente alterna y div visible y no visible.

El código está trabajando en el primer div, pero digamos que tengo múltiples con la misma estructura listada, y quiero que el alternar funcione en el segundo o tercer clic específico.

Me pregunto si es posible expandir el siguiente código para que sea dinámico.

Ejemplo con dos divs (solo el primero funcionará):

<a id="toggle" href="javascript:void(0);">Expand box 1</a>
<div id="content">Content 1</div>
<div id="contentHidden" style="display:none;">Hidden 1</div>

<br><br>

<a id="toggle" href="javascript:void(0);">Expand box 2</a>
<div id="content">Content 2</div>
<div id="contentHidden" style="display:none;">Hidden 2</div>

Jquery:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$(function() // run after page loads
{
$("#toggle").click(function()
{
// hides matched elements if shown, shows if hidden
$("#content, #contentHidden").toggle();
});
});

Respuestas

3 para la respuesta № 1

Primero, un Id debe ser único en cada objeto de árbol DOM. (div múltiple con id = "alternar" eventualmente funcionaría, pero no se recomienda. Prefiere el atributo de clase en este caso).

para su problema sugiero:

<a class="toggle" href="javascript:void(0);">Expand box 1</a>
<div class="content">Content 1</div>
<div class="contentHidden" style="display:none;">Hidden 1</div>

<br><br>

<a class="toggle" href="javascript:void(0);">Expand box 2</a>
<div class="content">Content 2</div>
<div class="contentHidden" style="display:none;">Hidden 2</div>

y el código jQuery:

$(function()
{
$(".toggle").click(function()
{
// hides children divs if shown, shows if hidden
$(this).children("div").toggle();
});
});

---

0 para la respuesta № 2

Primero: no puede usar la misma identificación (alternar) varias veces.

<a class="toggle" href="#">Expand box 1</a>
<div id="content">Content 1</div>
<div id="contentHidden" style="display:none;">Hidden 1</div>

<br><br>

<a class="toggle" href="#">Expand box 2</a>
<div id="content">Content 2</div>
<div id="contentHidden" style="display:none;">Hidden 2</div>

$(".toggle").click(function() {
var content = $(this).next();
$(content).toggle();
$(content).next().toggle(); // three lines above can also be done in a one-liner, but I prefer separate line for readability. In the end it"s a matter of taste
return false;
});

He cambiado el toggle id a class ya que no es HTML válido para volver a usar el mismo ID en la página. Id "s debe ser único.

.next() selecciona el siguiente elemento dom (hermana) en el árbol

---

0 para la respuesta № 3

El atributo id debe ser único. Debes cambiarlo a una clase:

$(function() // run after page loads
{
$(".toggle").click(function()
{
// hides matched elements if shown, shows if hidden
$(this).next().toggle();
$(this).next().next().toggle();

return false;
});
});

<a class="toggle" href="javascript:void(0);">Expand box 1</a>
<div>Content 1</div>
<div style="display:none;">Hidden 1</div>

<br><br>

<a class="toggle" href="javascript:void(0);">Expand box 2</a>
<div>Content 2</div>
<div style="display:none;">Hidden 2</div>

---

0 para la respuesta № 4

Para empezar, no debes usar identificadores más de una vez: en este caso, solo uno funciona porque el evento está adjunto solo en el primer ID coincidente.

De todos modos, podrías hacer esto: (http://jsfiddle.net/7Kmny/)

<a class="toggle" href="javascript:void(0);">Expand box 1</a>
<div id="content">Content 1</div>
<div id="contentHidden" style="display:none;">Hidden 1</div>

<br><br>

<a class="toggle" href="javascript:void(0);">Expand box 2</a>
<div id="content">Content 2</div>
<div id="contentHidden" style="display:none;">Hidden 2</div>
$(".toggle").click(function()
{
// hides matched elements if shown, shows if hidden
$(this).next().toggle();
$(this).next().next().toggle();
});

---

-2 para la respuesta № 5

Funciona solo con el primer div porque id debe ser único en la página. Deberías usar clases para trabajar con múltiples etiquetas.

<a class="toggle" href="javascript:void(0);">Expand box 1</a>
<div>
<div class="content">Content 1</div>
<div class="contentHidden" style="display:none;">Hidden 1</div>
</div>
<br><br>

<a class="toggle" href="javascript:void(0);">Expand box 2</a>
<div>
<div class="content">Content 2</div>
<div class="contentHidden" style="display:none;">Hidden 2</div>
</div>

Jquery:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$(function() // run after page loads
{
$(".toggle").click(function()
{
// hides matched elements if shown, shows if hidden
$(".content, .contentHidden", $(this).next()).toggle();
});
});

---