jQuery addClass example

Change class name on click in jQuery

by davehol

HTML

<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

var prog_list = (function() {

      var prog_table = $(".xm-grouped-table");
      var init, setStyle, tabe_style, tbl, div1, div2, div3, rows, filterList, GetQueryStringParams;

      div1 = div2 = div3 = $("<div></div>");

      var filterBy = $('<div/>').append("<a class='Vocational' href='#'>Certificates and diplomas</a>&nbsp<a class='Undergraduate ' href='#'>Degrees</a>&nbsp<a class='showAll' href='#'>Show all</a>").css({
        'margin-bottom': '15px',
      });

      setStyle = function(st) {
        table_style = st;
      }

      $('.responsivegrid').on('click', '.Undergraduate, .Vocational, .showAll', function() {

        filterList($(this).attr("class").split(' ')[0], $(this).parent().next("table"));
        $(this).parent().find('a.red').removeClass('red')
        $(this).addClass('red');
        return false;
      });

      init = function() {

        $.each(prog_table, function(index) {
          tbl = $(this);
          tbl.find("tr").unwrap();
          tbl.wrapInner("<tbody></tbody>");
          tbl.attr({
            width: "100%",
            cellspacing: "1",
            border: "1",
            cellpadding: "1"
          });
          tbl.find(".m-program-list-location a").contents().unwrap();
          div1.addClass("table rmit-table__" + table_style + " aem-GridColumn aem-GridColumn--default--12");
          div2.addClass("rmit-table__wrapper");
          div3.addClass("cmp-text");
          tbl.wrap(div1).wrap(div2).wrap(div3);
          tbl.removeClass("table");
          tbl.find(".m-program-list-title .visible-xxs").removeClass("visible-xxs").addClass("hide");
          tbl.find("caption").remove();
          tbl.find("th").eq(3).hide();
          tbl.find("tr").each(function(index) {
            if (index !== 0) {
              $row = $(this);
              $row.find("td").eq(4).find("a").eq(1).attr("href", $row.find("td").eq(1).find("a").attr("href")).text("Learn more");
              $row.find("td").eq(3).hide();
           ...