jQuery div visibility toggle not working

Question

I have several divs for displaying demo boxes of graphics, and code boxes for displaying sample code for using the graphics. What I want to do is make the code boxes invisible until you click on the demo box - which should make the code box slide into view. (See here to see how it looks)

This should be super simple with jQuery, as I've done it several times before, but for some reason I can't seem to get it to work this time.

Here's a shortened version of my code.

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

Can anyone spot the error? Cause I sure can't. Then again, I'm definitely no JavaScript wizard.

Answer 1

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

Answer 2

When I use Firefox and execute some of your commands from Firebugs console $(this).next(".code-left") doesn't return any elements. I don't think this is very pretty, but you could try doing something along the lines of

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

Cheers.

EDIT: kept local variable by accident.

Answer 3

If you only have one "code-left" and one "code-right" on the page, Phill's answer will work great.

If you have more than one of these, and are catching the click on "demobox-dark", then trying to get the next "code-left", because you have a paragraph in between the two, it won't really be the next.

You could, instead use nextAll instead of next to do this? for example,

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

Good luck!

Answer 4

Funka's answer works nicely. I'd probably go with a more structured approach. Assuming that each code block will only be associated with 1 demobox. Each demobox, I'd give an ID (based on your demo page) -

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