Using Bootstrap Panels for Navigation

Using Bootstrap Panels for Navigation

1) I am trying to use bootstrap panels and collapse for navigation. When I select a body item, I want the title of the body item to show up in the panel title. 

2) But the first thing I need to figure out is how to change the panel-title content after selecting a panel-body item. 

As you can see below, I am trying to use the replaceWith() function. But no matter what I try, it doesn't work. 

I thought about putting a variable in the panel title, setting the variable when the page loads  and then changing the var name somehow. 

3) Also, If I make the panel body item the click item, then when I click the href, it doesn't work either. 

This has to be easier than I am making it. 

Your input would be greatly appreciated. 



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <script>
$(document).ready(function(){
 $("#link1").click(function(){
   
     $( "div.MainTitle" ).replaceWith( "newTitle" );
   });
}); 
  
  
  
  </script>
</head>
<body>

<br>
<div class="container">
<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading" >
      <h4 class="panel-title">
        <a data-toggle="collapse"  href="#collapse1"><div class="MainTitle">wwCollapsible panel</div></a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body"  ID="link1" ><a href="" >Panel Body</a></div>
      
      <div class="panel-body"><a href="">Panel Body</a></div>
      <div class="panel-body"><a href="">Panel Body</a></div>
      
      
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>