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

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 2

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

Answer 3

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