title: Bootstrap replace panel contents
body: <p>I have a panel that I've created using Bootstrap. The panel contains a list of items with the item detail stored in a hidden div within the item itself. </p>
  
  <p>When the list item is clicked I would like to replace the entire panel content with the content of the detail div for the clicked item.</p>
  
  <p>I also need to revert back to the list view when the "Back to List" link is clicked.</p>
  
  <p>Obviously, I'm going to need to create a javascript function to do this, as I assume there's nothing within Bootstrap that handles this.</p>
  
  <p>What's the best way to do this?  </p>
  
  <pre><code>  &lt;div class="col-md-4 col-sm-6"&gt;
         &lt;div class="panel panel-default"&gt;
             &lt;div class="panel-heading"&gt;&lt;a href="#" class="pull-right"&gt;Back to List&lt;/a&gt; &lt;h4&gt;Symmetric Keys&lt;/h4&gt;&lt;/div&gt;
             &lt;div class="panel-body"&gt;
                 &lt;div&gt;Item 1
                     &lt;div class="hidden"&gt;This is the rest of the data&lt;/div&gt;
                 &lt;/div&gt;
                 &lt;div&gt;Item 2
                     &lt;div class="hidden"&gt;This is the rest of the data&lt;/div&gt;
                 &lt;/div&gt;
                 &lt;div&gt;Item 3
                     &lt;div class="hidden"&gt;This is the rest of the data&lt;/div&gt;
                 &lt;/div&gt;
                 &lt;div&gt;Item 4
                     &lt;div class="hidden"&gt;This is the rest of the data&lt;/div&gt;
                 &lt;/div&gt;
                 &lt;div&gt;Item 5
                     &lt;div class="hidden"&gt;This is the rest of the data&lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
         &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>I've created an example here:</p>
  
  <p><a href="http://www.bootply.com/y84ZiHTQ5W" rel="nofollow">http://www.bootply.com/y84ZiHTQ5W</a></p>