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></div>
<div class="container">
<div class="price-legend center">
  <div style="margin:0 auto;">
  <div id="price-btn-1" class="btn-pricing">Level 1 | $<span class="slight">$$$</span></div>
  <div id="price-btn-2" class="btn-pricing">Level 2 | $$<span class="slight">$$</span></div>
  </div>
  <div style="clear:both;height:1px"></div>
    <div style="margin:0 auto;">
    <div id="price-btn-3" class="btn-pricing">Level 3 | $$$<span class="slight">$</span></div>
    <div id="price-btn-4" class="btn-pricing">Level 4 | $$$$</div>
  </div>
</div>
</div>  <div style="clear:both;height:1px"></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">
    <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">
    <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">
    <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">
    <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;
}
.center {
  margin: auto;
  width: 66.667%;}

.sixforty {
  max-width: 640px;
  margin: 0 auto;
}
.highlight {
  background: #770d29 !important;
}
.visible {
  display: block !important;
  animation: fadeIn; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 0.87s;
}
.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;
}
.btn-pricing {
  background: #efefef;
  color: #000000;
  /*line-*/height: 1.2em;
  max-width: 40%;
  margin:2px;
  padding: 10px;
  float: left;
  text-align:center;
}
.btn-pricing:hover {
  background: #c5c5c5;
  cursor: pointer;
}
.price-legend{margin:0 auto;display:none}
.slight {
  font-weight: light;
  color: #c5c5c5;
}
.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;
  }
  .animateme {
    animation: bounce;
    animation-duration: 2s;
  }
  .price-legend{display:block}
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" rel="stylesheet" />