title: Hide/display hidden div when button is clicked
body: <p>So i've been working on this for a few days and just when I thought it was perfect I had to restructure the entire page and now i'm stuck. I have three images with buttons underneath each. Any time a button is clicked I need it to display the hidden content at the bottom of the page and hide any content that was visible. I also need the page to jump down so that the top of the div is at the top of the window. Here is what I have: </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>$("#Template1").click(function() {
  var div = document.getElementById('#content1');
  if (div.style.display !== 'none') {
      div.style.display = 'none';
  }
  else {
      div.style.display = 'block';
  }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.cell1 {
    display: table;
    text-align: center;
    table-layout: fixed;
    border-spacing: 10px;
    width: 100%;
  }
  .cell2 {
    display: table;
    text-align: center;
    table-layout: fixed;
    border-spacing: 10px;
    width: 100%;
  }
  .Column {
    vertical-align: top;
    width: 500px;
    display: table-cell;
  }
  #img1,
  #img2,
  #img3 {
    display: inline-block;
    align: center;
    padding: 10px 20px 10px 20px;
    vertical-align: top
  }
  #Template1,
  #Template2,
  #Template3 {
    margin-top: 14px;
    background-color: #cb3778;
    font-family: Arial;
    font-size: 20px;
    width: 260px;
    float: center;
    color: #FFF;
    cursor: pointer;
  }
  .Template0 {
    display: block;
    clear: both;
    width: 100%;
  }
  #content1,
  #content2,
  #content3 {
    display: none;
    clear: both;
    width: 100%;
  }
  @media only screen and (max-width: 600px) {
    *[class*="mobile-only"] {
      display: block !important;
      max-height: none !important;
    }
    .mobile {
      display: block !important;
      margin-top: 14px !important;
      margin-bottom: 14px !important;
      margin-left: 0px !important;
      padding: 10px 0 10px 0 !important;
    }
    .mobile-img {
      display: block !important;
      Width: 100% !important;
      align: center !important;
    }
    .mobile-column {
      display: block !important;
      Width: 100% !important;
      align: center !important;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div align="center"&gt;
    &lt;div class="Column mobile-column"&gt;
      &lt;div class="cell1"&gt;
        &lt;img width="400" height="355" border="0" src="col1-2.jpg" class="mobile-img" alt="Template 1" /&gt;
      &lt;/div&gt;
      &lt;div class="cell2 mobile" id="Template1"&gt;Template1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="Column mobile-column"&gt;
      &lt;div class="cell1"&gt;
        &lt;img width="400" height="355" border="0" src="6pack-1.jpg" class="mobile-img" alt="Template 2" /&gt;
      &lt;/div&gt;
      &lt;div class="cell2 mobile" id="Template2"&gt;Template2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="Column mobile-column"&gt;
      &lt;div class="cell1"&gt;
        &lt;img width="400" height="355" border="0" src="hero-1col.jpg" class="mobile-img" alt="Template 3" /&gt;
      &lt;/div&gt;
      &lt;div class="cell2 mobile" id="Template3"&gt;Template3&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div align="center"&gt;
    &lt;div align="center" style="padding-top:150px;" id="content1"&gt;sample demo txt two 2&lt;/div&gt;
    &lt;div align="center" style="padding-top:150px;" id="content2"&gt;sample demo txt two 3&lt;/div&gt;
    &lt;div align="center" style="padding-top:150px;" id="content3"&gt;sample demo txt two 4&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>