CSS翻页卡，无法在背面隐藏和显示内容

Question

我设计了翻页卡。实际上，问题是年度标签上的“显示详细信息”链接无法正常工作。所以我无法显示隐藏的内容。我为显示内容编写的jQuery代码正常运行。因此，当我单击“显示详细信息”链接时，内容显示为一个显示。帮我解决这个问题。提前致谢。注意：以上问题是在移动视图上发生的。

$(document).ready(function() {
  $(".flip").on("click", function() {
    $(this).addClass("btn-active").css({
      "color": "#fff"
    });
    $(".flipreverse").removeClass("btn-active").css({
      "color": "#000",
      "transition": "0.5s ease-in-out"
    });
    $('.card').removeClass('flipped');
  })
  $(".flipreverse").on("click", function() {
    $(this).addClass("btn-active").css({
      "color": "#fff"
    });

    $(".flip").removeClass("btn-active").css({
      "color": "#000",
      "transition": "0.5s ease-in-out"
    });
    $('.card').addClass('flipped');
  });

  $(".show-pricing-details, .hide-pricing-details").on("click", function() {
    if ($(this).text() == "Show Details") {
      $(this).text("Hide Details").removeClass("show-pricing-details").addClass("hide-pricing-details");
      $(this).parent().next().removeClass("hidden-xs hidden-sm").addClass("visible-xs visible-sm");
      return false;
    } else {
      $(this).text("Show Details").removeClass("hide-pricing-details").addClass("show-pricing-details");
      $(this).parent().next().removeClass("visible-xs visible-sm").addClass("hidden-xs hidden-sm");
      return false;
    }
  });
});

body {
  padding: 60px;
}

.boost-your-sales-bottom-wrap {
  padding: 20px 15px;
}

.bst-ur-sls-tgle-btn-wrp button {
  width: 200px;
  border: none;
  outline: none;
  font-size: 20px;
}

.bst-ur-sls-tgle-btn-wrp button:hover,
.bst-ur-sls-tgle-btn-wrp button {
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
  background-color: #fff;
  border-radius: 25px;
}

.bst-yr-sls-nav {
  border: 2px solid #555;
  border-radius: 50px;
  max-width: 448px;
  background: #fff;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
}

.btn-active {
  background: #1e6c97 !important;
  -webkit-transition: all 1s ease out;
  -o-transition: all 1s ease out;
  transition: all 1s ease-out;
  border-radius: 25px;
}

.bst-ur-sls-tgle-btn-wrp button:first-child {
  margin-left: 6px;
  color: #fff;
}

.bst-ur-sls-tgle-btn-wrp .navbar-btn:active,
.bst-ur-sls-tgle-btn-wrp .navbar-btn:focus {
  border: none !important;
  outline: none !important;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.flipcontainer {
  -webkit-perspective: 3500px;
  -o-perspective: 3500px;
  perspective: 3500px;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: -webkit-transform 1s;
  -webkit-transition: -webkit-transform 1s;
  -o-transition: transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.premium-card {
  margin-top: -10px;
}

.premium-card>.front,
.premium-card>.back {
  border: 2px solid #ffcc29 !important;
}

.card>div {
  display: block;
  width: 100%;
  position: absolute;
  border: 1px solid #ccc;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card .front {
  background: #fff;
  border-radius: 6px;
  color: #555;
  position: relative;
}

.card .back {
  background: #fff;
  top: 0;
  text-align: center;
  -webkit-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
  border-radius: 6px;
  color: #555;
}

.card.flipped {
  -webkit-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.flip-cards {
  margin-top: 40px;
  min-height: 2145px;
}

.col-xs-12,
.col-sm-12 {
  margin-bottom: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.paperindex.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet">

<link href="https://cdn.paperindex.com/css/pi-header-n-footer.min.css" rel="stylesheet">
<script src="https://cdn.paperindex.com/js/jquery/jquery-3.1.0.min.js"></script>
<div class="text-center">
  <nav class="navbar navbar-default bst-yr-sls-nav">
    <div class="container-fluid">
      <div class="navbar-header bst-ur-sls-tgle-btn-wrp">
        <button class="btn navbar-btn btn-active btn-active flip">Monthly</button> <button class="btn navbar-btn flipreverse"><b>Annual</b> <small>Save ~ 35%</small></button>
      </div>
    </div>
  </nav>
  <div class="row flip-cards">
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mrgn-btm-20">
      <section class="flipcontainer flip-section1">
        <div class="card mrgn-btm-10">
          <div class="front">
            <h3 class="clr-1E6C97"><b>Corporate</b></h3>
            <p>For Big Businesses</p>
            <h2 class="price"><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>1448</b></h2>
            <p class="text-center mrgn-btm-0">per month</p>
            <p class="mrgn-top-30 flex-lft-right-pad sm-mrgn-btm-20" style="margin-bottom: 120px;">Premium Access to Marketplace Features + Digital Marketing Campaign</p>
            <div class="subsribe-btn-wrp flex-top-bdr">
              <p class="mrgn-btm-4">Not publicly available</p><button class="btn boost-btn btn-lg radius-2 mrgn-btm-10" type="button">Contact Us <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> <a class="link show-pricing-details visible-xs visible-sm"
                href="#">Show Details</a>
            </div>
            <div class="hidden-xs hidden-sm">
              <div class="subsribe-btn-wrp flex-top-bdr">
                <p class="mrgn-btm-4">Not publicly available</p><button class="btn boost-btn btn-lg radius-2" type="button">Contact Us <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button>
              </div>
            </div>
          </div>
          <div class="back">
            <h3 class="clr-1E6C97"><b>Corporate</b></h3>
            <p>For Big Businesses</p>
            <h2 class="price"><i aria-hidden="true" class="fa fa-inr"></i>&nbsp;<b>869</b></h2>
            <p class="text-center mrgn-btm-0">per month</p>
            <p class="mrgn-top-30 mrgn-btm-30 flex-lft-right-pad">Premium Access to Marketplace Features + Digital Marketing Campaign</p>
            <div class="subsribe-btn-wrp flex-top-bdr">
              <p class="mrgn-btm-4">Not publicly available</p><button class="btn boost-btn btn-lg radius-2 mrgn-btm-10" type="button">Contact Us <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> <a class="link show-pricing-details visible-xs visible-sm"
                href="#">Show Details</a>
            </div>
            <div class="hidden-xs hidden-sm">
              <div class="flex-top-bdr pricing-tbl-bg">
                <div class="flex sales-details flex-lft-right-pad boost-ur-sales-flex">
                  <p class="mrgn-0"><b>Priority Support</b></p>
                </div>
              </div>
              <div class="flex-top-bdr flex-top-btm-pad">
                <div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-top-10 mrgn-btm-10">
                  <p class="text-left">Priority support on Skype</p>
                  <p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
                </div>
              </div>
              <div class="flex-top-btm-pad mrgn-btm-20">
                <div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-btm-10">
                  <p class="text-left">Priority support on e-mail</p>
                  <p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
                </div>
              </div>
              <div class="subsribe-btn-wrp flex-top-bdr">
                <p class="mrgn-btm-4">Not publicly available</p><button class="btn boost-btn btn-lg radius-2" type="button">Contact Us <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mrgn-btm-20">
      <section class="flipcontainer flip-section2">
        <div class="card premium-card">
          <div class="front pad-top-10">
            <h3 class="clr-1E6C97"><b>Diamond</b></h3>
            <p>For Medium and Small Businesses</p>
            <h2 class="price mrgn-top-10"><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>82</b></h2>
            <p class="text-center mrgn-btm-0">per month</p>
            <p class="mrgn-top-30 flex-lft-right-pad" style="margin-bottom:44px;"><u>Full Access</u> to Marketplace Features</p>
            <div class="subsribe-btn-wrp flex-top-bdr">
              <button class="btn btn-pi btn-lg radius-2 mrgn-top-24 mrgn-btm-10" type="button">Get Started <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> <a class="link show-pricing-details visible-xs visible-sm" href="#">Show Details</a>
            </div>
            <div class="hidden-xs hidden-sm">
              <div class="flex-top-btm-pad mrgn-btm-20">
                <div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-btm-10">
                  <p class="text-left">Free Phone Verification ($19 value)</p>
                  <p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
                </div>
              </div>
              <div class="flex-top-bdr pricing-tbl-bg">
                <div class="flex sales-details flex-lft-right-pad boost-ur-sales-flex">
                  <p class="mrgn-0"><b>Priority Support</b></p>
                </div>
              </div>
              <div class="flex-top-bdr flex-top-btm-pad">
                <div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-top-10 mrgn-btm-10">
                  <p class="text-left">Priority support on Skype</p>
                  <p><i aria-hidden="true" class="fa fa-times clr-red fnt-22"></i></p>
                </div>
              </div>
              <div class="flex-top-btm-pad mrgn-btm-20">
                <div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-btm-10">
                  <p class="text-left">Priority support on e-mail</p>
                  <p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
                </div>
              </div>
              <div class="subsribe-btn-wrp flex-top-bdr mrgn-btm-20">
                <button class="btn btn-pi btn-lg radius-2 mrgn-top-24" type="button">Get Started <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> <a class="link show-pricing-details visible-xs visible-sm" href="#">Show Details</a>
              </div>
            </div>
          </div>
          <div class="back pad-top-10">
            <h3 class="clr-1E6C97"><b>Diamond</b></h3>
            <p>For Medium and Small Businesses</p>
            <h2 class="price"><i aria-hidden="true" class="fa fa-inr"></i>&nbsp;<b>49</b></h2>
            <p class="text-center mrgn-btm-0">per month</p>
            <h4><span class="label label-default bg-ffcc29 clr-555">Save US$396 per year</span></h4>
            <p class="flex-lft-right-pad" style=""><u>Full Access</u> to Marketplace Features</p>
            <div class="subsribe-btn-wrp flex-top-bdr">
              <button class="btn btn-pi btn-lg radius-2 mrgn-top-24 mrgn-btm-10" type="button">Get Started <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> <a class="link show-pricing-details visible-xs visible-sm" href="#">Show Details</a>
            </div>
            <div class="hidden-xs hidden-sm">
              <div class="flex-top-btm-pad">
                <div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-btm-10">
                  <p class="text-left">Free Office Address Verification ($99/year value)</p>
                  <p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
                </div>
              </div>
              <div class="flex-top-btm-pad">
                <div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-btm-10">
                  <p class="text-left">Free Identity Verification ($39 value)</p>
                  <p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
                </div>
              </div>
              <div class="flex-top-btm-pad mrgn-btm-20">
                <div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-btm-10">
                  <p class="text-left">Free Phone Verification ($19 value)</p>
                  <p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
                </div>
              </div>
              <div class="flex-top-bdr pricing-tbl-bg">
                <div class="flex sales-details flex-lft-right-pad boost-ur-sales-flex">
                  <p class="mrgn-0"><b>Priority Support</b></p>
                </div>
              </div>
              <div class="flex-top-bdr flex-top-btm-pad">
                <div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-top-10 mrgn-btm-10">
                  <p class="text-left">Priority support on Skype</p>
                  <p><i aria-hidden="true" class="fa fa-times clr-red fnt-22"></i></p>
                </div>
              </div>
              <div class="flex-top-btm-pad mrgn-btm-20">
                <div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-btm-10">
                  <p class="text-left">Priority support on e-mail</p>
                  <p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
                </div>
              </div>
              <div class="subsribe-btn-wrp flex-top-bdr mrgn-btm-20">
                <button class="btn btn-pi btn-lg radius-2 mrgn-top-24" type="button">Get Started <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mrgn-btm-20">
      <section class="flipcontainer flip-section3">
        <div class="card">
          <div class="front">
            <h3 class="clr-1E6C97"><b>Pro</b></h3>
            <p>For Consultants</p>
            <h2 class="price"><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>65</b></h2>
            <p class="text-center mrgn-btm-0">per month</p>
            <p class="mrgn-top-30 flex-lft-right-pad"><u>Limited Access</u> to Marketplace Features</p>
            <div class="subsribe-btn-wrp flex-top-bdr">
              <button class="btn boost-btn btn-lg radius-2 mrgn-top-24 mrgn-btm-10" type="button">Get Started <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> <a class="link show-pricing-details visible-xs visible-sm" href="#">Show Details</a>
            </div>
            <div class="hidden-xs hidden-sm">
              <div class="flex-top-btm-pad mrgn-btm-20">
                <div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-btm-10">
                  <p class="text-left">Free Phone Verification ($19 value)</p>
                  <p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
                </div>
              </div>
              <div class="flex-top-bdr pricing-tbl-bg">
                <div class="flex sales-details flex-lft-right-pad boost-ur-sales-flex">
                  <p class="mrgn-0"><b>Priority Support</b></p>
                </div>
              </div>
              <div class="flex-top-bdr flex-top-btm-pad">
                <div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-top-10 mrgn-btm-10">
                  <p class="text-left">Priority support on Skype</p>
                  <p><i aria-hidden="true" class="fa fa-times clr-red fnt-22"></i></p>
                </div>
              </div>
              <div class="flex-top-btm-pad mrgn-btm-20">
                <div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-btm-10">
                  <p class="text-left">Priority support on e-mail</p>
                  <p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
                </div>
              </div>
              <div class="subsribe-btn-wrp flex-top-bdr">
                <button class="btn boost-btn btn-lg radius-2 mrgn-top-24" type="button">Get Started <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button>
              </div>
            </div>
          </div>
          <div class="back">
            <h3 class="clr-1E6C97"><b>Pro</b></h3>
            <p>For Consultants</p>
            <h2 class="price"><i aria-hidden="true" class="fa fa-inr"></i>&nbsp;<b>39</b></h2>
            <p class="text-center mrgn-btm-0">per month</p>
            <p class="mrgn-top-30 flex-lft-right-pad"><u>Limited Access</u> to Marketplace Features</p>
            <div class="subsribe-btn-wrp flex-top-bdr">
              <button class="btn boost-btn btn-lg radius-2 mrgn-top-24 mrgn-btm-10" type="button">Get Started <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button> <a class="link show-pricing-details visible-xs visible-sm" href="#">Show Details</a>
            </div>
            <div class="hidden-xs hidden-sm">
              <div class="flex-top-btm-pad mrgn-btm-20">
                <div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-btm-10">
                  <p class="text-left">Free Phone Verification ($19 value)</p>
                  <p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
                </div>
              </div>
              <div class="flex-top-bdr pricing-tbl-bg">
                <div class="flex sales-details flex-lft-right-pad boost-ur-sales-flex">
                  <p class="mrgn-0"><b>Priority Support</b></p>
                </div>
              </div>
              <div class="flex-top-bdr flex-top-btm-pad">
                <div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-top-10 mrgn-btm-10">
                  <p class="text-left">Priority support on Skype</p>
                  <p><i aria-hidden="true" class="fa fa-times clr-red fnt-22"></i></p>
                </div>
              </div>
              <div class="flex-top-btm-pad mrgn-btm-20">
                <div class="flex flex-lft-right-pad boost-ur-sales-flex mrgn-btm-10">
                  <p class="text-left">Priority support on e-mail</p>
                  <p><i aria-hidden="true" class="fa fa-check clr-green fnt-22"></i></p>
                </div>
              </div>
              <div class="subsribe-btn-wrp flex-top-bdr">
                <button class="btn boost-btn btn-lg radius-2 mrgn-top-24" type="button">Get Started <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>