Checklists

<div class="alert alert-info" role="alert">
	<p>
		<i class="fa fa-lg fa-check-circle-o fa-fw green" aria-hidden="true"></i>
		Click each step as you finish to track your progress.
	</p>
</div>
<div class="ap-container">
	<p class="text-right">
		<a role="button" class="btn btn-primary ap-refresh">
			<i class="fa fa-fw fa-refresh" aria-hidden="true"></i>
			Reset All
		</a>
	</p>
	<div class="panel panel-default">
		<div class="panel-heading ap-check">
			<h5 class="panel-title">1. Panel Title</h5>
			<div class="panel-body ap-content">
				Panel body content.
				<a class="pull-right btn btn-snagit">Copy</a>
				<pre class="prettyprint simple-code"><p>Sample code, here...</p></pre>
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading ap-check">
			<h5 class="panel-title">2. Panel Title</h5>
			<div class="panel-body ap-content">
				Panel body content.
				<a class="pull-right btn btn-snagit">Copy</a>
				<pre class="prettyprint simple-code"><p>Sample code, here...</p></pre>
			</div>
		</div>
	</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>

/* Checklist functionality */
.ap-content {
  padding-left: 1.9rem;
}

.ap-content .well {
   margin-top: 1rem;
}

.ap-check {
   background-color: transparent !important;
   height: 100%;
   width: 100%;
   border-bottom: none;
}

.ap-check .panel-title::before {
   content: "\f1db\00a0\00a0";
   font-family: "Fontawesome";
   font-size: 150%;
}

.ap-checked .panel-title::before {
   content: "\f058\00a0\00a0";
   font-family: "Fontawesome";
   color: green;
}

.ap-checked {
   color: silver !important;
}

.ap-image {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

/* Copy Button */
.btn-snagit {
   padding-top: 1rem;
   color: #007bff;
   margin-right: 1rem;
   display: block;
   width: 100%;
   text-align: right;
}

.btn-snagit:hover {
   color: #0062cc;
}

.btn-snagit:before {
   font-family: FontAwesome;
   content: "\f0ea\00a0";
}

function activateChecklist() {

  // Activate instructions
  $(".ap-check h5").on("click", function() {

    if ($(this).parent().hasClass("ap-checked")) {
       $(this).parent().removeClass("ap-checked");
       $(this).parent().next().css("color", "black");
       $(this).parent().find(".ap-content").slideDown();
    } else {
       $(this).parent().addClass("ap-checked");
       $(this).parent().next().css("color", "silver");
       $(this).parent().find(".ap-content").slideUp();
    }

  });

  $(".ap-refresh").on("click", function() {

    $(".ap-check").removeClass("ap-checked");
    $(".ap-content").css("color", "black");
    $(".ap-content").slideDown();

  });

}

activateChecklist();

// Instantiate the clipboard on all .btn-snagit class buttons
new ClipboardJS('.btn-snagit', {
  target: function(trigger) {
    return trigger.nextElementSibling;
  }
});