title: I want the botton from the popover on the bottom right to close the about div and I don't know how
body: <p>As you can see in the bottom right i have two buttons. Only the "About" button works. When you click it a new div appear. It works ok. But when you resize the window and make it smaller the "About" and "Feedback" buttons colapse into one button. When you click that button a popover appear with those two buttons. I don't know how to make the about button from popover work like normal about button. So than when I click him the about div to appear.</p>
  
  <p>Sorry for my poor english :(</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
     $("[data-toggle = 'popover']").popover({
        html: 'true',
        content : '&lt;button class="about-btn btn footer-buttons footerbuttonshov "&gt;About&lt;/button&gt; ' +
                  '&lt;button class="btn footer-buttons footerbuttonshov"&gt;Feedback&lt;/button&gt;'
     });
  });
  
  
  
  (function( $ ) {
    $.fn.keepRatio = function(which) {
        return $(this).each(function () {
            var $this = $(this);
            var w = $this.width();
            var h = $this.height();
            var ratio = w/h;
            $(window).resize(function() {
                switch(which) {
                    case 'width':
                        var nh = $this.width() / ratio;
                        $this.css('height', nh + 'px');
                        break;
                    case 'height':
                        var nw = $this.height() * ratio;
                        $this.css('width', nw + 'px');
                        break;
                }
            });
        });
    };
  })( jQuery );
  
  $(document).ready(function(){
      $('.login-container, .about-container, #x1, .round-buttons, .input, .popover, #ok, #forgot, #ok2  ').keepRatio('width');
  });
  
  $(document).ready(function(){
      $("#x1").click(function(){
          $(".about-container").hide();
      });
      $(".about-btn, #about-btn2").click(function(){
          $(".about-container").show();
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      height:900px;
  }
  
  #navbar-main {
      background: #017f55;
      border:1px solid #000;
      border-radius: 0;
      clear:both;
      position:fixed;
      float:right;
  }
  #title {
      color:#000;
      font-size: 43px;
      top:7px;
  }
  
  #select {
      color:#000;
      height:30px;
  }
  .wrapper {
      height:89%;
  }
  .login-container {
      position:absolute;
      background-color: #017f55;
      height:80%;
      width:40.9%;
      min-width: 200px;
      min-height: 300px;
      margin:0 auto;
      top:100px;
      border-radius: 25px;
      right:29.5%;
  }
  p {
      font-size: 30px;
      color:#fff;
      text-align: center;
  }
  input[type="text"]{
      width: 87%;
      height: 45px;
      border-radius: 25px;
      border:none;
      padding-left: 15px;
      color:#e0e0e0;
      margin-top: 2%;
      font-size:30px;
      font-size: 1.5vw;
      margin-left: 3%;
  }
  input[type="button"]{
      border:none;
      border-radius: 25px;
      height:45px;
      background: #f98500;
      font-weight: bolder;
      margin-top: 2%;
      width:15%;
      font-size: 30px;
      font-size: 1.5vw;
      margin-left: 3%;
  }
  #forgot {
      margin-left: 3%;
  }
  #ok {
      margin-left: 56.5%;
  }
  #hr {
      color: #000;
      background-color: #000;
      height: 1px;
      border:none;
      width: 95%;
      margin-top:2%;
  }
  #register {
      margin:auto;
  }
  #ok2 {
      margin-left:42.5%;
  }
  .round-buttons {
      height:25px;
      width:3%;
      background-color:#f98500;
      display:inline-block;
      border-radius: 50px;
      margin-left: 2%;
  }
  .question-mark {
      font-size:20px;
      font-size: 1vw;
  }
  .question-mark:hover {
      cursor: pointer;
  }
  .popover {
      width:200px;
  }
  .about-container {
      position:absolute;
      background-color: #fff;
      height:80%;
      width:40.9%;
      min-width: 200px;
      min-height: 300px;
      margin:0 auto;
      top:100px;
      border-radius: 25px;
      right:29.5%;
      border:1px solid #000;
      display: none;
  }
  #about-footer {
      background-color: #017f55;
      border-top-right-radius: 25px;
      border-top-left-radius: 25px;
  }
  #about {
      display: inline-block;
      font-size: 45px;
      font-size: 3vw;
      margin-left:38%;
  }
  #about-text {
      color: #000;
      text-align: left;
      font-size:40px;
      font-size: 2.5vw;
      margin-left: 3%;
      margin-top: 3%;
  }
  #x1 {
      position:absolute;
      display:inline-block;
      width: 5%;
      height:40px;
      background-color: #f98500;
      top:3%;
      right:3%;
      border-radius: 25px;
  }
  #x1:hover, #x2:hover {
      cursor: pointer;
  }
  .x-buttons {
      color:#000;
      font-weight: bolder;
      font-size: 1.5vw;
  }
  #nav-footer {
      background: #017f55;
      display:inline;
      text-align: right;
      border:1px solid #000;
  }
  .footer-buttons {
      display:inline;
      font-size: 20px;
      padding-right: 20px;
      background: none;
  }
  .icon-bar{
      border: 1px solid #fff;
  }
  #footer-navbar {
      border-color: #000;
  }
  
  #footer-button {
      border:1px solid #333
  }
  #footer-button:hover {
      background-color: #333;
  }
  #footer-button:active {
      background-color: #333333;
  }
  .footerbuttonshov:hover{
      background:#f98500;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Code Test&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/main.css"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/script.js"&gt;&lt;/script&gt;
          &lt;!-- Latest compiled and minified CSS --&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;!-- Optional theme --&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"&gt;
  
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;!--Header--&gt;
  &lt;!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------&gt;
  
          &lt;nav id="navbar-main" class="navbar navbar-inverse navbar-fixed-top"&gt;
            &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;/button&gt;
                &lt;img src="images/test_logo.png"&gt;
              &lt;/div&gt;
  
              &lt;div id="navbar" class="collapse navbar-collapse"&gt;
                &lt;ul class="nav navbar-nav center"&gt;
                  &lt;li&gt;&lt;a href="#index" id="title"&gt;Code Test&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;
                      &lt;select id="select"&gt;
                          &lt;option value="English"&gt;English&lt;/option&gt;
                          &lt;option value="Devanagari"&gt;Devanagari&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/nav&gt;
  
          &lt;!--Main Container--&gt;
  &lt;!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------&gt;
          &lt;div class="wrapper"&gt;
              &lt;div class="login-container"&gt;
                  &lt;p&gt;Login&lt;/p&gt;
                  &lt;form&gt;
                      &lt;input type="text" value="Username" class="input"&gt;&lt;/input&gt;&lt;br&gt;
                      &lt;input type="text" value="Password" class="input"&gt;&lt;/input&gt;&lt;br&gt;
                      &lt;input type="button" value="Forgot" id="forgot"&gt;&lt;/input&gt;
                      &lt;input type="button" value="OK" id="ok"&gt;&lt;/input&gt;
                  &lt;/form&gt;
                  &lt;hr id="hr" noshade&gt;
                  &lt;p id="register"&gt;Register&lt;/p&gt;
                  &lt;form&gt;
                      &lt;input type="text" value="Email" class="input"&gt;&lt;/input&gt;&lt;div class="round-buttons"&gt;&lt;p class="question-mark" data-toggle="popover"
                            data-content="Enter Email" data-placement="right" data-trigger="hover"&gt;?&lt;/p&gt;&lt;/div&gt;&lt;br&gt;
                      &lt;input type="text" value="Username" class="input"&gt;&lt;/input&gt;&lt;div class="round-buttons"&gt;&lt;p class="question-mark" data-toggle="popover"
                            data-content="Enter username" data-placement="right" data-trigger="hover"&gt;?&lt;/p&gt;&lt;/div&gt;&lt;br&gt;
                      &lt;input type="text" value="Password" class="input"&gt;&lt;/input&gt;&lt;div class="round-buttons"&gt;&lt;p class="question-mark" data-toggle="popover"
                            data-content="Enter password" data-placement="right" data-trigger="hover"&gt;?&lt;/p&gt;&lt;/div&gt;&lt;br&gt;
                      &lt;input type="text" value="Repeat Password" class="input"&gt;&lt;/input&gt;&lt;br&gt;
                      &lt;input type="button" value="OK" id="ok2"&gt;&lt;/input&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div class="about-container"&gt;
                  &lt;div id="about-footer"&gt;&lt;p id="about"&gt;About&lt;/p&gt;&lt;div id="x1" class="x1"&gt;&lt;p class="x-buttons"&gt;X&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
                  &lt;p id="about-text"&gt;Front-end Web Developer Test&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
              &lt;!--Footer--&gt;
  &lt;!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------&gt;
  
          &lt;nav id="nav-footer" class="navbar navbar-default navbar-fixed-bottom"&gt;
              &lt;div id="footer" class="container2"&gt;
                  &lt;div class="navbar-header"&gt;
                    &lt;button id="footer-button" type="button" class="navbar-toggle collapsed" data-toggle="popover" data-target="#footer-navbar" data-placement="top"&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                    &lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div id="footer-navbar" class="navbar-inner navbar-content-center collapse navbar-collapse"&gt;
                      &lt;button class="btn footer-buttons about-btn"&gt;About&lt;/p&gt;
                      &lt;button class="btn footer-buttons"&gt;Feedback&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&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;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>