jQuery refactoring, how to make simple short code for this

Question

They are different selectors and functions. But they are very similar.

Is there any way to make it simpler?

var detailBtn = $('.doc__footer__menu__detail');
var detailModal = $('.doc__footer__detail');
var detailClose = $('.doc__footer__detail-close');

var activateDetail = function() {
    detailBtn.addClass('active');
    detailModal.addClass('active');
    detailClose.addClass('active');
    $('body').addClass('lock-scroll');
    $('html').addClass('lock-scroll');
    return false;
}

var deactivateDetail = function() {
    detailBtn.removeClass('active');
    detailModal.removeClass('active');
    detailClose.removeClass('active');
    $('body').removeClass('lock-scroll');
    $('html').removeClass('lock-scroll');
}

//
var relBtn = $('.doc__footer__menu__rel');
var relModal = $('.doc__footer__rel');
var relClose = $('.doc__footer__rel-close');

var activateRel =function() {
    relBtn.addClass('active');
    relModal.addClass('active');
    relClose.addClass('active');
    $('body').addClass('lock-scroll');
    $('html').addClass('lock-scroll');
    return false;
}

var deactivateRel = function() {
    relBtn.removeClass('active');
    relModal.removeClass('active');
    relClose.removeClass('active');
    $('body').removeClass('lock-scroll');
    $('html').removeClass('lock-scroll');
}

//
var attachBtn = $('.doc__footer__menu__attachment');
var attachModal = $('.doc__footer__attachment');
var attachClose = $('.doc__footer__attachment-close');

var activateAttach =function() {
    attachBtn.addClass('active');
    attachModal.addClass('active');
    attachClose.addClass('active');
    $('body').addClass('lock-scroll');
    $('html').addClass('lock-scroll');
    return false;
}

var deactivateAttach = function() {
    attachBtn.removeClass('active');
    attachModal.removeClass('active');
    attachClose.removeClass('active');
    $('body').removeClass('lock-scroll');
    $('html').removeClass('lock-scroll');
}

They are almost the same code except for the words 'detail', 'rel', 'attach'.

Stackoverflow said it looks like my post is mostly code, so I have to add some more details, but I don't know what should I say more XD

I imagine that if I use loop that 3 words as array, can it be possible?

Answer 1

Try toggleClass

const toggle = function(what, on) {
  $(".doc__footer__menu__" + what)     .toggleClass('active', on);
  $(".doc__footer__" + what)           .toggleClass('active', on);
  $(".doc__footer__" + what + "-close").toggleClass('active', on);
  $('body').toggleClass('lock-scroll', on);
  $('html').toggleClass('lock-scroll', on);
}

using

toggle('detail',true);
toggle('rel',true);

to turn on

and

toggle('detail',false);
toggle('rel',false);

to turn off

Answer 2

If you can send a parameter when you call the function then you can do something like this:

var activateDetail = function(rule) {
  $('.doc__footer__menu__' + rule).addClass('active');
  $('.doc__footer__' + rule).addClass('active');
  $('.doc__footer__' + rule + '-close').addClass('active');
  $('body').addClass('lock-scroll');
  $('html').addClass('lock-scroll');
  return false;
}

var deactivateDetail = function(rule) {
  $('.doc__footer__menu__' + rule).removeClass('active');
  $('.doc__footer__' + rule).removeClass('active');
  $('.doc__footer__' + rule + '-close').removeClass('active');
  $('body').removeClass('lock-scroll');
  $('html').removeClass('lock-scroll');
}

activateDetail('detail');
activateDetail('rel');
activateDetail('attachment');