title: Hide/Show left sidebar on mouse hover
body: <p>What css/js function can be used to make my left sidebar hide/show on mouse hover, so if my mouse is somewhere in the middle of screen, google iframe from code will be displayed at whole page, but if i put my mouse on the left, sidebar will be visible and google iframe will be less sized?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      padding-top: 70px; /* Padding for .navbar-fixed-top. Change value if navbar height changes. Remove if using .navbar-static-top. */
  }
  
  h1, h2, h3, h4, h5, h6 {
   color: black;
   }
  
  #side-carousel img {
   margin: 0 auto;
   }
  
  .footer-blurb {
      padding: 30px 0;
      margin-top: 20px;
      background-color: #eee;
      color: black;
  }
      
  .footer-blurb-item {
      padding: 20px;
      }
   
  .small-print {
   background-color: #fff;
   padding: 30px 0;
  }
  
  .feature,
  .page-intro,
  .article-intro,
  .small-print {
   text-align: center;
   }
   
   .extra { 
      display: none;
  }
  
  p:hover .extra {
      display: block;
  }
  
  .box{
      display: none;
      width: 100%;
  }
  
  a:hover + .box,.box:hover{
      display: block;
      position: relative;
      z-index: 100;
  }
  
  * {
   box-sizing: border-box;
  }
  
  #myInput {
    background-image: url('/css/searchicon.png');
    background-position: 10px 12px;
    background-repeat: no-repeat;
    width: 100%;
    font-size: 10px;
    padding: 12px 20px 12px 40px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
  }
  
  #myUL {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  
  #myUL li a {
    border: 1px solid #ddd;
    margin-top: -1px; /* Prevent double borders */
    background-color: #f6f6f6;
    padding: 6px;
    text-decoration: none;
    font-size: 12px;
    color: black;
    display: block
  }
  
  #myUL li a.header {
    background-color: #e2e2e2;
    cursor: default;
  }
  
  #myUL li {
   display: none;
  }
  
  #myUL li a:hover:not(.header) {
    background-color: #eee;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
  
      &lt;title&gt;Testing Page&lt;/title&gt;
  
      &lt;!-- Bootstrap Core CSS --&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
  
      &lt;!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles --&gt;
      &lt;link href="css/custom.css" rel="stylesheet"&gt;
  
      &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
          &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
          &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;!-- Navigation --&gt;
      &lt;nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
          &lt;div class="container"&gt;
              &lt;!-- Logo and responsive toggle --&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"&gt;
                      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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;!-- Search --&gt;&lt;/div&gt;
              &lt;!-- /.navbar-collapse --&gt;
          &lt;/div&gt;
          &lt;!-- /.container --&gt;
      &lt;/nav&gt;
  
  &lt;div class="container-fluid"&gt;
  
    &lt;!-- Left Column --&gt;
    &lt;div style="overflow: hidden; margin: 1px auto; max-width: 2736px;"&gt;
            &lt;iframe src="http://google.com" width="2500px" height="1200"&gt; &lt;/iframe&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-3"&gt;
  &lt;div class="panel panel-default"&gt;
  &lt;center&gt;
  &lt;p&gt;&lt;center&gt;&lt;center&gt;&lt;b&gt;
  &lt;p class="tooltip-inner"&gt;asasassa&lt;/p&gt;
  &lt;p class="tooltip-inner"&gt;as&lt;/p&gt;
  &lt;p class="tooltip-inner"&gt;sa&lt;/p&gt;
  &lt;p class="tooltip-inner"&gt;as&lt;/p&gt;
  &lt;p class="tooltip-inner"&gt;asas&lt;/p&gt;
  &lt;p class="tooltip-inner"&gt;&amp;nbsp;&lt;/p&gt;
  &lt;p class="tooltip-inner"&gt;as&lt;/p&gt;
  &lt;p class="tooltip-inner"&gt;as&lt;/p&gt;
  &lt;p class="tooltip-inner"&gt;as&lt;/p&gt;
  &lt;p class="tooltip-inner"&gt;asas&lt;/p&gt;
  &lt;p class="tooltip-inner"&gt;as&lt;/p&gt;
  &lt;p class="tooltip-inner"&gt;s&lt;/p&gt;
  &lt;p class="tooltip-inner"&gt;a&lt;/p&gt;
  &lt;/b&gt;
  &lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
     &lt;!-- List-Group Panel --&gt;&lt;!--/Left Column--&gt;
    
    
    &lt;!-- Center Column --&gt;
    &lt;div class="col-sm-6"&gt;
    
     &lt;!-- Alert --&gt;
     
    
     &lt;!-- Articles --&gt;
     &lt;div class="row"&gt;&lt;/div&gt;
     &lt;div class="row"&gt;&lt;/div&gt;
     &lt;div class="row"&gt;&lt;/div&gt;
    &lt;/div&gt;&lt;!--/Center Column--&gt;
  
  
     &lt;!-- Right Column --&gt;&lt;!--/Right Column --&gt;
  
  &lt;/div&gt;&lt;!--/container-fluid--&gt;&lt;!-- jQuery --&gt;
      &lt;script src="js/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Bootstrap Core JavaScript --&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
   
   &lt;!-- IE10 viewport bug workaround --&gt;
   &lt;script src="js/ie10-viewport-bug-workaround.js"&gt;&lt;/script&gt;
   
   &lt;!-- Placeholder Images --&gt;
   &lt;script src="js/holder.min.js"&gt;&lt;/script&gt;
   
      &lt;!-- Searchable Driver List --&gt;
   &lt;script src="js/driverlist.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>