jQuery Simple Example

by Venugopal

HTML

<script src="//www.addressfinder.co.nz/assets/v2/widget.js"></script>
<ul>
  <li class="modern">
   <button>Ex 1</button>
  <li>
  <li class="classic">
   <button>Ex 2</button>
  </li>
  </ul>

<svg>
  <path class="modern class1 class2"></path>
  <path class="classic"></path>
</svg>

CSS

body {
    padding: 5px;
}

label {
    font-weight: bold;
}

input[type=text] {
    width: 20em
}

p {
    margin: 1em 0 0;
}

JavaScript

$("button").on("click", function() {
  var periodClass = $(this).parent().attr("class");
  $("svg path").each(function() {
    var cl = $(this).attr('class');
    $(this).attr('class', cl.includes(periodClass) ? cl + ' active' : cl.replace('active', ''));
  });
});