Question

I need to refactor this to avoid code repetition.

$('#showmore-towns').toggle(
    function() {
        $('.popularTownsAdditional').show();
        console.log(this);
        $('#showmore-town .showless').show();
        $('#showmore-town .showmore').hide();
        $('#showmore-town').removeClass('sd-dark28').addClass('sd-dark28down');
        return false;
    },
    function() {
        $('.popularTownsAdditional').hide();
        $('.showless').hide();
        $('.showmore').show();
        $('#showmore-towns').addClass('sd-dark28').removeClass('sd-dark28down');
    });

$('#showmore-cities').toggle(
    function() {
        $('.popularCitiesAdditional').show();
        $('#showmore-cities .showless').show();
        $('#showmore-cities .showmore').hide();
        $('#showmore-cities').removeClass('sd-dark28').addClass('sd-dark28down');
        return false;
    },
    function() {
        $('.popularCitiesAdditional').hide();
        $('#showmore-cities .showless').hide();
        $('#showmore-cities .showmore').show();
        $('#showmore-cities').addClass('sd-dark28').removeClass('sd-dark28down');
    });

basically, it shows the same functionality but only on different divs with different IDs.

Answer 1

Probably just need to reference a named function or two instead of the anon ones.

function showStuff(typeToShow) {
    $('.popular' + typeToShow + 'Additional').show();
    $('#showmore-' + typeToShow + .showless').show();
    $('#showmore-' + typeToShow + .showmore').hide();
    $('#showmore-' + typeToShow).removeClass('sd-dark28').addClass('sd-dark28down');
    return false;
}

function hideStuff(typeToHide) {
    $('.popular' + typeToHide + 'Additional').hide();
    $('#showmore-' + typeToHide + .showless').hide();
    $('#showmore-' + typeToHide + .showmore').show();
    $('#showmore-' + typeToHide ).addClass('sd-dark28').removeClass('sd-dark28down');
}

NOTE: a) You could probably make these methods a bit slicker, but you get the idea!
NOTE: b) You’d need to rename ‘#showmore-town’ to ‘#showmore-towns’ (with an S) if you want to use the substitution suggested.

Then in your toggle you could reference these functions:

$('#showmore-towns').toggle(showStuff(towns),
hideStuff(towns));

$('#showmore-cities').toggle(showStuff(cities),
hideStuff(cities));