jQuery div visibilità non TOGGLE funzionante

Question

Ho diversi div per la visualizzazione scatole demo di grafica, e scatole di codice per la visualizzazione di codice di esempio per l'utilizzo della grafica. Quello che voglio fare è rendere le caselle di codice invisibile fino a quando si fa clic sulla casella di demo - che dovrebbe rendere la diapositiva di dialogo codice in vista. ( Vedi qui per vedere come appare )

Questo dovrebbe essere super semplice con jQuery, come ho già fatto diverse volte prima, ma per qualche motivo non riesco a farlo funzionare questa volta.

Ecco una versione abbreviata del mio codice.

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

Qualcuno può macchiare l'errore? Perché io certo non si può. Poi di nuovo, io sono assolutamente alcuna procedura guidata JavaScript.

Answer 1

Se si dispone di un solo "codice-sinistra" e un "codice-destra" sulla pagina, la risposta di Phill sarà grande lavoro.

Se si dispone di più di uno di questi, e stanno recuperando il click su "Demobox-scuro", quindi cercando di ottenere il Avanti "code-sinistra", perché si ha un paragrafo in mezzo i due, non sarà davvero il Avanti .

Si potrebbe, invece usare nextAll invece di next per fare questo? per esempio,

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

In bocca al lupo!

Answer 2

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

Answer 3

Quando uso Firefox ed eseguire alcuni dei vostri comandi da console Firebugs $(this).next(".code-left") non restituisce alcun elemento. Non credo che questo è molto carina, ma si potrebbe provare a fare qualcosa sulla falsariga di

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

Saluti.

EDIT:. Mantenuto variabile locale per caso

Answer 4

Funka 's risposta funziona bene. Probabilmente sarei andare con un approccio più strutturato. Supponendo che ciascun blocco di codice verrà associato solo 1 Demobox. Ogni Demobox, mi piacerebbe dare un ID (in base alla tua pagina di configurazione) -

$(".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>