jQuery data- attributes

Used with buttons and DIVs

by jimkennelly

HTML

<button>
Bruno
</button>

CSS

#rama {
  background: #239d9a;
}

#sita {
  background: #ca6996;
}

div {
  padding: 20px;
  margin-top: 10px;
}

JavaScript

// jQuery is enabled


// hide all the divs
$('.character').hide();


// this function will work for an infinite number of buttons and divs - if the classes and IDs are set up correctly in HTML 
$('.name').click(function() {
  // hide any open div
  $('.character').hide();
  // get value of data attribute from the thing that was clicked 
  var person = $(this).data('person');
  $(person).slideDown();
});