style boutons

gistfile1.txt

<!-- 
* make sure to update the id of the answer div and also the data-answerid for the button, both must match to link the button to the answer 

* If you are using more than one of these in a page, then make to have a unique id for each answer and then copy that to the corresponding data-boxid attribute.

For example this show answer has an id of -> "answer1" note that the button's data-boxid is also 'answer1'

* If button name includes "Show" or "Hide" these two words toggle between each other when the button is clicked.
e.g. if the button text is set to "Show Answer" then it will toggle to "Hide Answer" once the user clicks on the button.

It's simple right?  :) 

-->
<p>
  <button class='btn btn-default answer-button' data-boxid='box1' onclick='javascript:toggleBox(this)'>Show Box 1</button>
  <button class='btn btn-default answer-button' data-boxid='box2' onclick='javascript:toggleBox(this)'>Show Box 2</button>
  <button class='btn btn-default answer-button' data-boxid='box3' onclick='javascript:toggleBox(this)'>Show Answer</button>
</p>

<div id="box1" class='toggle_box'>
   <p class="heading">Sample Response BOX 1</p> <!-- EDIT THE TITLE OF THE BOX IF NEEDED -->
 <div id='textAnswer'>
<!-- PLACE YOUR ANSWER/CONTENT IN HERE -->
      
      <p> This is the first sample answer</p>

      
	      
<!-- PLACE YOUR ANSWER/CONTENT IN HERE -->
  </div>
</div>
  
<div id="box2" class='toggle_box'>
   <p class="heading">Sample Response BOX 2</p> <!-- EDIT THE TITLE OF THE BOX IF NEEDED -->
 <div id='textAnswer'>
<!-- PLACE YOUR ANSWER/CONTENT IN HERE -->
      
      <p> This is the second sample answer with addtional content</p>
   <iframe width="560" height="315" src="https://www.youtube.com/embed/fZ_JOBCLF-I?rel=0" frameborder="0" allowfullscreen></iframe>      
<!-- PLACE YOUR ANSWER/CONTENT IN HERE -->
 </div>
</div>



<div id="box3" class='toggle_box'>
   <p class="heading">Solution</p> <!-- EDIT THE TITLE OF THE BOX IF NEEDED -->
 <div id='textAnswer'>
<!-- PLACE YOUR ANSWER/CONTENT IN HERE -->
      
      This is where my answer can go
      
<!-- PLACE YOUR ANSWER/CONTENT IN HERE -->
 </div>
</div>


<style>
 .toggle_box p.heading {
  color:#aaa;
  font-size:0.9em;
  font-style: normal;
       font-weight: bold;
  font-size:120%;
 }
    .answer-button:focus{
      outline:0;
    }
 .toggle_box {
  color:#333;
  box-shadow: inset 0 0 0 1px #eee;
  margin:20px 0;
  border:1px solid #ddd;
  padding:9px 15px 20px;
  border-radius:3px;
        display:none;
 }
</style>
<script type='text/javascript'>
  function toggleBox(boxButton) {
    console.log($(boxButton).data('boxid'));
 if(!$('#'+$(boxButton).data('boxid')).hasClass('boxShown')) {
  $('#'+$(boxButton).data('boxid')).css({'display':'block'});
        var text = $(boxButton).text();
  $(boxButton).text(text.replace('Show','Hide'));
       $('#'+$(boxButton).data('boxid')).addClass('boxShown');
 } else {
  $('#'+$(boxButton).data('boxid')).css({'display':'none'});
       var text = $(boxButton).text();
  $(boxButton).text(text.replace('Hide','Show'));
        $('#'+$(boxButton).data('boxid')).removeClass('boxShown');
 }
  }
</script>