Pricing Guide Alternate Mobile

index.html

<div class="container sixforty">
 <h2 class="pricing-headings"> DESIGN TO
   YOUR BUDGET</h2>
<p style="text-align:center">The cost of your home storage solution is
driven by the complexity of the design and the
materials you choose. Consider the options for
a reach-in closet below, to see how your
design consultant will guide you in your
  selections based on your budget.</p>
  <p style="text-align:center">*Prices and materials will vary by location.</p>
</div>
<div class="mobile-level-buttons">
  <div class="fifty"><button id="price-btn-1"><strong>$</strong><span class="faint">$$$</span></button><button id="price-btn-2"><strong>$$</strong><span class="faint">$$</span></button></div>
    <div class="fifty"><button id="price-btn-3"><strong>$$$</strong><span class="faint">$</span></id><button id="price-btn-4"><strong>$$$$</strong><span></span></button></div>
</div>
<div class="container">
  <div id="f-one" class="fourths"><div class="f-pad"><img src="https://classyclosets.com/lp/images/price-1.jpg"></img></div></div>
  <div id="f-two" class="fourths"><div class="f-pad"><img src="https://classyclosets.com/lp/images/price-2.jpg"></img></div></div>
  <div id="f-three" class="fourths"><div class="f-pad"><img src="https://classyclosets.com/lp/images/price-3.jpg"></img></div></div>
  <div id="f-four" class="fourths"><div class="f-pad"><img src="https://classyclosets.com/lp/images/price-4.jpg"></img></div></div>
</div>

<div class="container">
  <div id="sl_1" class="w3-animate-opacity">
    <div class="halfs">
      <img class="pricing-image" src="https://classyclosets.com/lp/images/price-1.jpg"></img></div>
    <div class="halfs">
      <h2>Price level 1</h2>
      <p class="p-pad">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</p>
      <ul class="pricing-guide">
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
    </div>

  </div>
  <div id="sl_2" class="w3-animate-opacity">
    <div class="halfs">
      <img class="pricing-image" src="https://classyclosets.com/lp/images/price-2.jpg"></img></div>
    <div class="halfs">
      <h2>Price level 2</h2>
      <p class="p-pad">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</p>
      <ul class="pricing-guide">
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
    </div>
  </div>
  <div id="sl_3" class="w3-animate-opacity">
    <div class="halfs">
      <img class="pricing-image" src="https://classyclosets.com/lp/images/price-3.jpg"></img></div>
    <div class="halfs">
      <h2>Price level 3</h2>
      <p class="p-pad">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</p>
      <ul class="pricing-guide">
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
    </div>
  </div>
  <div id="sl_4" class="w3-animate-opacity">
    <div class="halfs">
      <img class="pricing-image" src="https://classyclosets.com/lp/images/price-4.jpg"></img></div>
    <div class="halfs">
      <h2>Price level 4</h2>
      <p class="p-pad">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters</p>
      <ul class="pricing-guide">
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
    </div>
  </div>
</div>

pricing-guide-alternate-mobile.markdown

Pricing Guide Alternate Mobile

A Pen by Ryan Underdown on CodePen.

License.

script.js

$( document ).ready(function() {
  $("#sl_1").addClass("visible");
  $("#f-one, #price-btn-1").addClass("highlight");
  
  $( "#f-one, #price-btn-1" ).click(function() {
    $( this ).toggleClass("highlight");
    $("#f-two, #f-three, #f-four, #price-btn-2, #price-btn-3, #price-btn-4" ).removeClass("highlight");
    $("#sl_1").addClass("visible"); 
    $("#sl_2, #sl_3, #sl_4").removeClass("visible");
    
  });
  $( "#f-two, #price-btn-2" ).click(function() {
    $( this ).toggleClass("highlight");
    $("#f-one,#f-three, #f-four, #price-btn-1, #price-btn-3, #price-btn-4" ).removeClass("highlight");
    $("#sl_1, #sl_3, #sl_4").removeClass("visible"); 
    $("#sl_2").addClass("visible");
        $.scrollTo('#pi2');
  });
  $( "#f-three, #price-btn-3" ).click(function() {
    $( this ).toggleClass("highlight");
    $("#f-one,#f-two,#f-four, #price-btn-1, #price-btn-2, #price-btn-4" ).removeClass("highlight");
    $("#sl_1, #sl_2, #sl_4").removeClass("visible"); 
    $("#sl_3").addClass("visible");
        $.scrollTo('#pi3');
  });
  $( "#f-four, #price-btn-4" ).click(function() {
    $( this ).toggleClass("highlight");
    $("#f-one, #f-two, #f-three, #price-btn-1, #price-btn-2, #price-btn-3" ).removeClass("highlight");
    $("#sl_1, #sl_2, #sl_3").removeClass("visible"); 
$("#sl_4").addClass("visible");
        $.scrollTo('#pi4');
  });
        console.log( "ready!" );
 });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>

style.css

.container {max-width:1280px;margin:0 auto;}
.fourths {width:24%;float:left;margin-bottom:2em;}
.sixforty{max-width:640px; margin:0 auto}
.highlight {background:#770d29 !important}
.visible{display:block !important}
.f-pad{ width:100%;height:100%;position:relative;top:0;left:0;opacity: 0.8; }
.p-pad{padding:5px 10px;font-size:14px;line-height:18px}
.faint{color:#d5d5d5}
#sl_1,#sl_2, #sl_3, #sl_4 {display:none;}
.pricing-guide li{font-size:14px;line-height:18px}
.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.fourths img {width:100%}
.fourths:not(:last-child){margin-right:1%}
.fourths:hover {cursor:pointer;}
.pricing-headings{color: #770D29;text-align:center}
.halfs {width:50%;float:left}
.halfs h2{padding:10px; color: #770D29}
.pricing-image{}
.pricing-buttons{width:49%}
.fifty{max-width:50%; margin:0 auto;padding-bottom:1em}
.fifty button {width:49%;background:#770d29}
.fifty button:not(:last-child){margin-right:1%}
.mobile-level-buttons {max-width:1280px;margin:0 auto;display:none;}
@media (max-width: 767px) {
  .halfs {width:100%;}
  .halfs img {width:100%;}
  /*#sl_1,#sl_2, #sl_3, #sl_4 {display:block}*/
  #f-one, #f-two, #f-three, #f-four{display:none}
  .mobile-level-buttons {display:block;}
}