JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<div style="margin-top: 10px;"> 
  <button data-content="content1" type="button" class="btn btn-primary">Training</button><br>
  <button data-content="content2" type="button" class="btn btn-info">Goal Setting</button><br>
  <button data-content="content3" type="button" class="btn btn-success">Race Results</button><br>
</div>

<div class="data_target" style="margin: 10px;">
  To view some of the functionality of each feature, click on the button for that feature.
</div>

<div style="display:none;">
  <div id="content1">Content 1</div>
  <div id="content2">Content 2</div>
  <div id="content3">Content 3</div>
</div>

CSS

button { width: 140px; }

JavaScript

$(document).ready(function() {
    // Now the document is ready, you can do your stuff!
    $('button').click(function() {
	    var text = $('#' + $(this).data('content')).html();
      $('.data_target').text(text);
    });
});