target previous $this

Question

How do I target $this (from 'each' context) from inside 'click' function. I want to remove awkward .parents().find() code.

$('.layout.responsive').each(function () {
    $('.area.optional', this).before('<a href="#" class="toggle_responsive" onClick="return false">Show details</p>').hide();
    $('.toggle_responsive', this).click(function () {
        $(this).parents('.layout.responsive').find('.area.optional').toggle();
    });
});

Answer 1

Save it in a named (non-special) variable:

$('.layout.responsive').each(function () {
    var area = $('.area.optional', this).before('<a href="#" class="toggle_responsive" onClick="return false">Show details</p>').hide();
    $('.toggle_responsive', this).click(function () {
        $(area).toggle();
    });
});

Answer 2

You can simply store it in a variable:

$('.layout.responsive').each(function () {
    var $elem = $('.area.optional', this).before('<a href="#" class="toggle_responsive">Show details</p>').hide();
    $('.toggle_responsive', this).click(function(e) {
        e.preventDefault();
        $elem.toggle();
    });
});

Also note the e.preventDefault(); call which does pretty much what your onclick="return false;" did but in a much cleaner way.