Question

I’m trying to show/hide multiple divs with classnames based on proximity to the anchor which triggers the JQuery. I think something is wrong with how I’m referencing the div which I want to show.

I have a Fiddle here: http://jsfiddle.net/lizfulghum/qKMH8/4/ and I’m assuming the issue is with this line: JQuery(this).next(".full").show();

The complete code is as follows:

HTML

<div class="teaser">
    Blah blah blah
    <a href="#" class="toggle">Toggle</a>
</div>

<div class="full">
    Full Text Goes Here
</div>

<div class="teaser">
    Blah blah blah
    <a href="#" class="toggle">Toggle</a>
</div>

<div class="full">
    Full Text 2 Goes Here
</div>

Javascript

jQuery(document).ready(function() {
    jQuery(".full").hide();
    jQuery(".toggle").click(function() {
        JQuery(".full").hide();
        JQuery(this).next(".full").show();
  });
});

Could anyone enlighten me on this point?

Answer 1

You’ve mistyped jQuery twice. Also you have to go one level up in the DOM tree before calling .next():

//                             \/ aliases jQuery back to $
jQuery(document).ready(function($) {
    $(".full").hide();
    $(".toggle").click(function() {
        $(".full").hide();
        $(this).parent().next(".full").show();
    });
});

Fiddle

I’ve aliased jQuery to $ inside the DOM ready scope — the first parameter of the DOM Ready handler receives the jQuery object itself. $ is faster to type and less likely to mistype. You can safely use this syntax in WP and other .noConflict() scenarios as well.

Of course, if you have no other libraries taking the global $ and you’re not using a framework that puts jQuery into noConflict mode, you can use $ instead of jQuery out of the box.