Question

I cant figure out to target the next div to show/hide it with JQuery.

JavaScript:

    $("a.more").live("click", function(event){
        event.preventDefault();
        $(this).next('.show-more').toggle();
    }); 

DOM:

            <p>
                {{beschreibung}}
                (<a class="more" href="{{id}}"><i class="icon-plus"></i>)
            </p>

            <div class="show-more" style="display:none;">
                <p>
                   {{beschreibung_lang}}
               </p>
            </div>

Any ideas where the problem is?

Failure between screen and keyboard: Missed the closing a TAG (-;

Answer 1

The element that is bound in the event handler is the anchor, and the anchor has no sibling elements, i.e. next() will not work. You need to first traverse up the DOM to the closest paragraph, and then find the next div etc.

live() is deprecated, and should be replaced with the delegated version of on() for dynamic elements, like so:

$(document).on("click", ".more", function(event){
    event.preventDefault();
    $(this).closest('p').next('.show-more').toggle();
});