Efficient way to reduce jquery code

I'm working on an application that has some repeating code. Wheneven I try to reduce this code it breaks.

For example this code is repeating itself
$(this).before(leftArrowHTML); $(this).after(rightArrowHTML);

Also, if you see there is much more code there. So what should be the efficient way to handle that?

var left = '.lessonNavigation li.expanded.left';
var actLsn = '.lessonNavigation li.activeLesson';
var right = '.lessonNavigation li.expanded.right';
var leftArrowHTML = '<li class="left arrow"><i class="icon icon-arrow-left"></i></li>';
var rightArrowHTML = '<li class="right arrow"><i class="icon icon-arrow-right"></i></li>';

$('.lessonNavigation ').on('click', '.expandable li', function () {
    if ($(this).is(".arrow,.inactiveRightArrow,.inactiveLeftArrow,.activeLesson")) {
        return false;
    }

    $('.arrow, .inactiveRightArrow, .inactiveLeftArrow').remove();

    if ($(this).is(':last-child')) {
        $(this).attr('class', 'activeLesson');
        $(this).prev().attr('class', 'expanded left');
        $(this).prev().prev().attr('class', 'expanded left');
        $(this).before(leftArrowHTML);
        $(this).after(rightArrowHTML);
        $('.arrow.right').attr('class', 'inactiveRightArrow');

    } else if ($(this).is(':first-child')) {

        $(this).attr('class', 'activeLesson');
        $(this).next().attr('class', 'expanded right brw');
        $(this).next().next().attr('class', 'expanded right');
        $(this).before(leftArrowHTML);
        $(this).after(rightArrowHTML);
        $('.arrow.left').attr('class', 'inactiveRightArrow');

    } else {

        $('.lessonNavigation li').attr('class', 'dn');
        // .attr('class', 'dn')
        $(this).attr('class', 'activeLesson');
        $(this).prev().attr('class', 'expanded left');
        $(this).next().attr('class', 'expanded right');
        $(this).before(leftArrowHTML);
        $(this).after(rightArrowHTML);
    }

    console.log(this)
});