title: Adjust tab content and background heights
body: <p>I have 2 tabs that lay on a block with a background image. Depending on which tab is clicked, the background image of the tabs and the tab content panel should change height. I cannot do it through CSS so I thought of using JS to change heights, but it is not working.</p>
  <p>Here is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#two-tab').click(function() {
    $('.search-tabs').height('350px');
    $('#two-panel').height('272px')
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.search-tabs {
    background-image: url('https://i.pinimg.com/originals/af/8d/63/af8d63a477078732b79ff9d9fc60873f.jpg')!important;
    background-position: center top!important;
    height: 281px!important;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tab-radio{
      display:none;
  }
  #one:checked ~ .panels #one-panel,
  #two:checked ~ .panels #two-panel{
     display:block
  }
  #one:checked ~ .tabs #one-tab,
  #two:checked ~ .tabs #two-tab{
    background:#F5A000;
    color:#000;
  }
  
  .tab-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
  }
  
  .tab {
    cursor: pointer;
    width: 160px;
    padding: 5px 0px;
    margin: 0px 10px;
    background: #FFF;
    display: inline-block;
    text-align: center;
    color: #000;
    border-radius: 6px 6px 0px 0px;
    font-size: 13px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
  }
  
  .panels {
    height: 229px;
    width: 333px;
    position: relative;
    border-radius: 0px 0px 8px 8px;
    border-top: 3px solid #F5A000;
    background-color: rgba(255, 255, 255, 0.5);
  }
  
  .panel {
    display: none;
    animation: fadein .8s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="search-tabs"&gt;
    &lt;div class="tab-wrapper"&gt;
    
      &lt;input class="tab-radio" id="one" name="group" type="radio" checked&gt;
      &lt;input class="tab-radio" id="two" name="group" type="radio"&gt;
      
      &lt;div class="tabs"&gt;
        &lt;label class="tab" id="one-tab" for="one"&gt;Tab 1&lt;/label&gt;
        &lt;label class="tab" id="two-tab" for="two"&gt;Tab 2&lt;/label&gt;
      &lt;/div&gt;
  
      &lt;div class="panels"&gt;
        &lt;div class="panel" id="one-panel"&gt;
          Content for tab 1
        &lt;/div&gt;
        &lt;div class="panel" id="two-panel"&gt;
          Content for tab 2
        &lt;/div&gt;
      &lt;/div&gt;
      
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But this is not working. Any ideas?</p>