title: onclick change/restore container content
body: <p>I have the following code: <a href="https://jsfiddle.net/ox5xq082/" rel="nofollow">https://jsfiddle.net/ox5xq082/</a></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Profile&lt;/title&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
          &lt;script src="javascript/script.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"&gt;&lt;/script&gt;
          &lt;style&gt;
          body        { padding-top:80px; word-wrap:break-word; }
      &lt;/style&gt;
  
  
  
  
          &lt;/head&gt;
      &lt;body&gt;
      &lt;div class="container"&gt;
  
          &lt;div class="page-header text-center"&gt;
              &lt;h1&gt;&lt;span class="fa fa-anchor"&gt;&lt;/span&gt; Profile Page&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;!-- LOCAL INFORMATION --&gt;
              &lt;div class="col-sm-3"&gt;
                  &lt;div class="well"&gt;
                      &lt;h3&gt;&lt;span class="fa fa-user"&gt;&lt;/span&gt; User Info &lt;/h3&gt;
                          &lt;p&gt;
                              &lt;strong&gt;id&lt;/strong&gt;: &lt;%= user._id %&gt;&lt;br&gt;
                              &lt;strong&gt;email&lt;/strong&gt;: &lt;%= user.local.email %&gt;&lt;br&gt;
                              &lt;strong&gt;Username&lt;/strong&gt;: &lt;%= user.local.username %&gt;&lt;br&gt;
                              &lt;strong&gt;Country&lt;/strong&gt;: &lt;%= user.local.country %&gt;&lt;br&gt;
                              &lt;strong&gt;Region&lt;/strong&gt;: &lt;%= user.local.region %&gt;&lt;br&gt;
                              &lt;hr&gt;
                              &lt;strong&gt;Food&lt;/strong&gt;: &lt;%= user.local.inventory.food %&gt;&lt;br&gt;
                              &lt;strong&gt;Energy Drinks&lt;/strong&gt;: &lt;%= user.local.inventory.energyDrinks %&gt;&lt;br&gt;
                              &lt;hr&gt;
                              &lt;strong&gt;Eur&lt;/strong&gt;: &lt;%= user.local.budget.eur.toFixed(2) %&gt;&lt;br&gt;
                              &lt;strong&gt;Gold&lt;/strong&gt;: &lt;%= user.local.budget.gold.toFixed(2) %&gt;&lt;br&gt;
                              &lt;strong&gt;Silver&lt;/strong&gt;: &lt;%= user.local.budget.silver.toFixed(3) %&gt;&lt;br&gt;
                              &lt;hr&gt;
                              &lt;strong&gt;Estate&lt;/strong&gt;: &lt;% if (user.local.estate.movedIn === true) { %&gt;
                                                          Owned
                                                      &lt;% } else if (user.local.estate.rented.movedIn === true) { %&gt;
                                                          Renting from &lt;%= user.local.estate.rented.rentedFrom %&gt;
                                                      &lt;% } else { %&gt;
                                                          No Office Owned or Rented
                                                      &lt;% } %&gt;&lt;br&gt;
                              &lt;hr&gt;
                              &lt;strong&gt;Energy&lt;/strong&gt;: &lt;%= user.local.energy.toFixed(2) %&gt;%&lt;br&gt;
  
                          &lt;/p&gt;
  
                          &lt;hr&gt;
                          &lt;button id="shop" class="btn btn-primary"&gt;Shop&lt;/button&gt;
                          &lt;button id="duel" class="btn btn-primary"&gt;Duel&lt;/button&gt;
                          &lt;a href="/logout" class="btn btn-danger btn-sm"&gt;Logout&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;!-- Center Page --&gt;
              &lt;div id="center-div" class="col-md-9"&gt;
                  &lt;div class="container"&gt;
                          default content
                      &lt;div id="duel-window" style="width=100% height=100%"&gt; duel content 
                          &lt;span id="pp_close" class="glyphicon glyphicon glyphicon-remove"&gt;&lt;/span&gt;
  
                      &lt;/div&gt;
                      &lt;div id="shop-window" style="width=100% height=100%"&gt; shop content
                          &lt;span id="pp_close" class="glyphicon glyphicon glyphicon-remove"&gt;&lt;/span&gt;
  
                      &lt;/div&gt;
                  &lt;div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;script&gt;
      $('#duel').click(function() {
  
          $('#duel-window').css("display","block")
      });
      $('#shop').click(function() {
  
       $('#shop-window').css("display","block")
      });
      &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>    html {
          height: 100%;
          margin: 0;
          padding: 0;
      }
  
      body {
          margin: 0;
          padding: 0;
      }
  
  
      #user-info {
          float: left;
          display: none;
      }
  
  
      #center-div {
          background-color: #f5f5f5;
          border: #e3e3e3;
          height : 595px;
  
      }
  
      #duel-window {
          display:none;
      }
      #shop-window {
          display:none;
      }
      #pp_close {
          position: absolute;
          top: 0px;
          right: 0px;
          color: red;
          font-size: 25px;
      }
  </code></pre>
  
  <p>I want to be able to change just the content of center-div container. If I press Shop button it should change to shop content and when I press duel it should change to duel content. When I press the pp_close button it should go back to default content. How would I achieve this ?</p>