Name Swap

by Ryan Brackett

CSS

body * {
  font-size: 80px;
  cursor: pointer;
}

.name {
  display: none;
}

.active {
  display: block;
}

JavaScript

// Create some HTML elements within the BODY tag. Give them classes.
$("body")
  .append("<div class='firstname name'></div>")
  .append("<div class='lastname name'></div>");

// Select the "firstname" element and give it the class "active" 
$(".firstname").addClass("active");

// Add a class to the first instance of the element with the class "name" 
$(".firstname").append("Ryan");
$(".lastname").append("Brackett");

// When you click an element with class "name", do something
$(".name").click(function() {

  // For each element with class "name", do something
  $(".name").each(function() {

    // If element has class "active", remove it. If not, add that class.
    $(this).toggleClass("active");

  });
});