Show and Hide group of classes based on data attributes Somebody please verify this code. Is this efficient? please tell me modular way to accomplish this task.


  Updated
  
  I want to add show class to data-targetand remove
  show class from data-group Just like happening in an accordion. I wanted to know that this code is perfect for that scenario. I'm new here please let know if did not provide enough information.


$(function () {
  $(document).on("click", ".showHide", function() {
    var hideClasses = $(this).data("group").split(" ");
    var showClasses = $(this).data("target").split(" ");

    $.each(hideClasses, function(k, v) {
      $("."+v).removeClass("show");
    });
    $.each(showClasses, function(k, v) {
      $("."+v).addClass("show");
    });
  });  
});


HTML tag

&lt;a href="#" class="showHide" data-target="loginPanel" data-group="accountPanel"&gt;Remeber Password?&lt;/a&gt;



  More Info
  
  Please find the pen I have the working link. Try clicking on login, sign up, forgot password password and the stay relaxed.


CodePen Link
Instead of looping over the showClasses and hideClasses you can do a regex search and replace, then add/remove the class names:

var trimRegex = /^\s+|\s+$/g,
    selectorRegex = /(^| +)([-_a-zA-Z0-9]+)/g,
    callback = function(match, $1, $2) {
        if ($1) {
            return ", ." + $2;
        } else {
            return "." + $2;
        }
    },
    hideSelector = this.getAttribute("data-group")
        .replace(trimRegex, "")
        .replace(selectorRegex, callback),
    showSelector = this.getAttribute("data-target")
        .replace(trimRegex, "")
        .replace(selectorRegex, callback);

$(hideSelector).removeClass("show");
$(showSelector).addClass("show");


Secondly, since the document object exists the moment JavaScript begins executing, there is no need to wait for the document to load:

$(document).on("click", ".showHide", function() { ... });