JQuery div visibilidade alternando não funcionando

Question

Eu tenho várias divs para exibir caixas de demonstração de gráficos e caixas de código para exibir código de amostra para usar os gráficos. O que eu quero fazer é tornar as caixas de código invisíveis até você clicar na caixa de demonstração - que deve tornar a caixa de código deslizar para a exibição. (Veja aqui para ver como fica)

Isso deve ser super simples com o JQuery, como já o fiz várias vezes antes, mas por algum motivo não consigo fazer com que funcione desta vez.

Aqui está uma versão abreviada do meu código.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
  //hide the all of the element with class code-*
  //$(".code-left").hide();
  //$(".code-right").hide();
-->
  //toggle the component with the respective class
  $(".demobox-dark").click(function()
  {
    $(this).next(".code-left").slideToggle(600);
  });
  $(".demobox-light").click(function()
  {
    $(this).next(".code-right").slideToggle(600);
  });
});
</script>

<div class="demobox-light">
    <div class="color_blacktext"> </div>
    <p>Black text</p>
</div>
<div class="demobox-dark">
    <div class="color_whitetext"> </div>
    <p>White text</p>
</div>
<p>Code:</p>
<div class="code-left">
    <p class="code">TEXT</p>
</div>

Alguém pode identificar o erro? Porque eu com certeza não posso. Por outro lado, definitivamente não sou assistente de JavaScript.

Answer 1

Se você tiver apenas um "Code-Left" e um "Right-Right" na página, a resposta de Phill funcionará muito bem.

Se você tem mais de um deles e está pegando o clique em "Demobox-Dark", então tentando obter o próximo "Code-Left", porque você tem um parágrafo entre os dois, não será realmente o próximo.

Você poderia, em vez disso, usar nextAll ao invés de next para fazer isso? por exemplo,

$(this).nextAll(".code-left:first").slideToggle(600);

Boa sorte!

Answer 2

$(".demobox-dark").click(function()
  {
    $(".code-left").slideToggle(600);
  });
  $(".demobox-light").click(function()
  {
    $(".code-right").slideToggle(600);
  });

Answer 3

Quando uso o Firefox e executo alguns de seus comandos do Firebugs Console $(this).next(".code-left") não retorna nenhum elemento. Eu não acho que isso seja muito bonito, mas você pode tentar fazer algo parecido com

next_code_block    = $(this).nextAll(".code-left")[0];
$(next_code_block).slideToggle(600);

Felicidades.

EDIT: Mantido a variável local por acidente.

Answer 4

Funka's responda funciona bem. Eu provavelmente iria com uma abordagem mais estruturada. Supondo que cada bloco de código seja associado apenas a 1 Demobox. Cada Demobox, eu daria um ID (com base na sua página de demonstração) -

$(".demobox").click(function()
{
    var $this = $(this);
    $("#" + $this.id() + "_code").slideToggle(600);
});

<div id="ubuntu_black_text" class="demobox demobox-dark">
</div>
<div id="ubuntu_white_text" class="demobox demobox-light">
</div>
<div id="ubuntu_black_text_code" class="code-left">
</div>
<div id="ubuntu_white_text_code" class="code-right">
</div>