jQuery слайд-контент на радио проверке

Question

Я пытаюсь сделать небольшую функцию jQuery, чтобы скрыть & показать содержимое, когда установлен переключатель. Сценарий работает, но когда переключатель установлен, содержимое отображается неправильно. Можно сделать эффект, чтобы скользить, а затем скользить в другом содержимом?

HTML:

<!-- Section class pricing --> 
<section class="pricing"> 
    <div class="container"> 
     <hr class="hr"> 
     <!-- Price table switcher --> 
     <div class="table-switcher" id="btn"> 
      <p class="fieldset"> 
       <input type="radio" checked="checked" name="duration" value="account-1" id="account-1"> 
       <label for="account-1">1</label> 
       <input type="radio" name="duration" value="account-2" id="account-2"> 
       <label for="account-2">2</label> 
       <span class="btn-switch"></span> 
      </p> 
     </div> 
     <!-- Price table switcher end --> 
     <div class="clearfix"></div> 

     <!-- Info box --> 

     <div class="clearfix"></div> 

     <div class="accounts container"> 
     <div class="price-table"> 
      <!-- Account Plus --> 
      <div class="col-md-12"> 
        <!-- Table --> 
        <div class="account-1 account-box"> 
        <ul class="list-unstyled col-md-6"> 
         <li class="plan">Basic</li> 
          <li class="plan-cost">$99k</li> 
          <li class="plan-duration">Per Month</li> 
          <li>Use on One Site</li> 
          <li>Feature Two</li> 
          <li>Another Great Feature</li> 
          <li class="plan-button"><a href="#">Get Started &raquo;</a></li> 
        </ul> 
        <!-- Table end --> 
        <!-- Table --> 

         <ul class="list-unstyled col-md-6"> 
          <li class="plan">Basic</li> 
          <li class="plan-cost">$99</li> 
          <li class="plan-duration">Per Month</li> 
          <li>Use on One Site</li> 
          <li>Feature Two</li> 
          <li>Another Great Feature</li> 
          <li class="plan-button"><a href="#">Get Started &raquo;</a></li> 
         </ul> 

        <!-- Table end --> 
        </div> 
      </div> 
      <!-- Account Plus end --> 

      <!-- Account O€ --> 
      <div class="account-2 account-box"> 
       <!-- Table --> 
       <div class="col-md-6"> 
        <ul class="list-unstyled"> 
         <li class="plan">Basic</li> 
         <li class="plan-cost">$99</li> 
         <li class="plan-duration">Per Month</li> 
         <li>Use on One Site</li> 
         <li>Feature Two</li> 
         <li>Another Great Feature</li> 
         <li class="plan-button"><a href="#">Get Started &raquo;</a></li> 
        </ul> 
       </div> 
       <!-- Table end --> 
       <!-- Table --> 
       <div class="col-md-6"> 
        <ul class="list-unstyled"> 
         <li class="plan">Basic</li> 
         <li class="plan-cost">$99</li> 
         <li class="plan-duration">Per Month</li> 
         <li>Use on One Site</li> 
         <li>Feature Two</li> 
         <li>Another Great Feature</li> 
         <li class="plan-button"><a href="#">Get Started &raquo;</a></li> 
        </ul> 
       </div> 
       <!-- Table end --> 
      </div> 
      <!-- Account 0€ --> 
     </div> 
     </div> 


    </div> 
</section> 

CSS:

// Prebuild colors 
@white  : #ffffff; 
@dark  : #4a4a4a; 
@blue  : #4e94c9; 
@blue-dark : #2279bc; 
@blue-font : #276db3; 
@purple  : #805ca2; 
@purple-dark: #5b308d; 
@gray-light : #a8a8a8; 
@gray-font : #797979; 
@pink  : #bf4194; 
@pink-light : #F04; 

// Other 
@letter-spacing:(2px); 
.bold { font-weight: 700} 
.hr { 
    max-width: 100px; 
    height: 4px; 
    background: url("../images/hr.gif") no-repeat center; 
    margin: 20px auto; 
} 
// Pricing section -3 
.pricing { 
    padding: 100px 0; 
    h2 { 
     letter-spacing: @letter-spacing; 
     font-size: 30px; 
     font-weight: 400; 
     text-transform: uppercase; 
     text-align: center; 
     color: @blue-font; 
     .bold { 
      color: @purple-dark; 
     } 
    } 
    // Price table switcher 
    .table-switcher { 
     text-align: center; 
     input[type="radio"]:checked + label + .btn-switch, 
     input[type="radio"]:checked + label:nth-of-type(n) + .cd-switch{ 
      /* Safary bug fix selector */ 
      -webkit-transform: translateX(120px); 
      -moz-transform: translateX(120px); 
      -ms-transform: translateX(120px); 
      -o-transform: translateX(120px); 
      transform: translateX(120px); 
      background: @blue-font; 
     } 
     .fieldset { 
      margin-top: 15px; 
      margin-bottom: 30px; 
      display: inline-block; 
      position: relative; 
      padding: 0px 2px; 
      border-radius: 50em; 
      border: 1px solid @gray-light; 
      input[type="radio"]:checked + label { 
       color: @white; 
       transition: all 0.5s; 
      } 
     } 
     input[type="radio"] { 
      position: absolute; 
      opacity: 0; 
     } 
     label { 
      position: relative; 
      z-index: 1; 
      display: inline-block; 
      float: left; 
      width: 120px; 
      height: 39px; 
      line-height: 45px; 
      cursor: pointer; 
      font-size: 1.4rem; 
     } 
     .btn-switch { 
      position: absolute; 
      top: 2px; 
      left: 2px; 
      height: 40px; 
      width: 120px; 
      background-color: @purple-dark; 
      border-radius: 50em; 
      -webkit-transition: -webkit-transform 0.5s; 
      -moz-transition: -moz-transform 0.5s; 
      transition: transform 0.5s; 

     } 
    } 
    .no-js .table-switcher { 
     display: none; 
    } 
    // Table info 
    // Popover box 
    .arrow_box { 
     position: relative; 
     background: @purple; 
     border: 3px solid @purple-dark; 
     padding: 15px; 
     color: @white; 
    } 
    .arrow_box{ 
     &:after { 
      top: 100%; 
      left: 50%; 
      border: solid transparent; 
      content: " "; 
      height: 0; 
      width: 0; 
      position: absolute; 
      pointer-events: none; 
     } 
     &:before { 
      top: 100%; 
      left: 50%; 
      border: solid transparent; 
      content: " "; 
      height: 0; 
      width: 0; 
      position: absolute; 
      pointer-events: none; 
     } 
    } 
    .arrow_box { 
     &:before{ 
      border-color: rgba(136, 183, 213, 0); 
      border-top-color: @purple-dark; 
      border-width: 10px; 
      margin-left: -10px; 
     } 
     &:after { 
      border-color: rgba(136, 183, 213, 0); 
      border-top-color: @purple-dark; 
      border-width: 10px; 
      margin-left: -10px; 
     } 
    } 
    // Accounts 
    .accounts { 
     position: relative; 
     transition: all 0.5s; 
    } 

    .top-tooltip{ 
     background-color: #26c07d; 
     font-size: 12px; 
     font-weight: 400; 
     margin:-87px auto 68px; 
     padding: 6px; 
     color:#fff; 
     width:80px; 

    } 
    .price-table { 
     width: 100%; 
     .account-1 { 

      .col-md-6 { 
       padding: 0; 
       left: 0; 

      } 
     } 
    } 
    .best-value{ 
     padding: 87px 0 72px !important; 

    } 
    .small-boxes { 
     margin-top: 40px; 
     padding-top: 72px; 
     padding-bottom: 68px; 
     text-transform: uppercase; 
     text-align: center; 
     background-color: #fff; 
     width: 100%; 
    } 
    .plan { 
     font-size: 24px; 
     color: #79a5b3; 
     line-height:30px; 
     border: none !important; 
    } 
    .plan-cost { 
     font-size:60px !important; 
     color:#000 !important; 
     line-height:90px !important; 
     border: none !important; 
    } 
    .plan-duration { 
     line-height: 30px !important; 
     margin-bottom:35px; 
     border: none !important; 
    } 
    .plan-button { 
     border: none !important; 
     margin-top: 30px; 
    } 
    .plan-button-big { 
     border: none !important; 
     margin-top: 45px; 
    } 
    .price-table ul li { 
     color: #a2a4a6; 
     font-size: 16px; 
     border-bottom: #f2f4f5 1px solid; 
     border-top: #f2f4f5 1px solid; 
     line-height: 47px; 
    } 
    .price-table ul li a{ 
     background-color:#FFF; 
     border: #d4d7d9 1px solid; 
     padding: 15px 30px; 
     font-size: 20px; 
     color:#27b0d8; 
     font-weight:400; 
     text-decoration:none; 
     border-radius: 4px; 
    } 
    .price-table ul li a:hover{ 
     background-color:#44bbdd; 
     border: #44bbdd 1px solid; 
     color:#fff; 
    } 
    .price-table ul li a.big{ 
     background-color:#ec4f4f; 
     border: #ec4f4f 1px solid; 
     padding: 15px 30px; 
     font-size: 24px; 
     color:#fff; 
     font-weight:400; 
     text-decoration:none; 
     border-radius: 4px; 
    } 
    .price-table ul li a.big:hover{ 
     background-color:#293340; 
     border: #293340 1px solid; 
     color:#fff; 
    } 
} 

JS:

$('.account-2').hide(); 
$(document).ready(function() { 
    $('input[name="duration"]').click(function() { 
     $('.account-1').fadeOut('slow'); 
     $('.account-2').fadeIn('slow'); 
    }); 
    $('input[name="duration"]').click(function() { 
     $('.account-2').fadeOut('slow'); 
     $('.account-1').fadeIn('slow'); 
    }); 
}); 

Demo

Answer 1

Попробуйте этот сценарий ... codepen

 $('.account-2').hide(); 
     $(document).ready(function() { 
      var flagcheck= false; 
      $('input[name="duration"]').click(function() {  
      if(flagcheck==false){ 
       $('.account-1').fadeOut('slow'); 
       $('.account-2').fadeIn('slow'); 
       flagcheck=true; 
      }else{ 
       $('.account-2').fadeOut('slow'); 
       $('.account-1').fadeIn('slow');     
       flagcheck= false; 
      } 
      }); 

     }); 

Answer 2

Он не работает, поскольку вы используете тот же самый триггер, чтобы делать то же самое. Используйте

this.val() 

предназначено для отображения содержимого, которое требуется отобразить.

ОБНОВЛЕНО:

$(document).ready(function() { 

    $('input[name="duration"]').click(function() { 
     $objToHide = ""; 
     $('.account-box').each(function(){//find out which obj is visible here 
      if ($(this).css("display") == "block"){ 
       $objToHide = $(this); 
      } 
     }); 
     var content = $(this).val() 
     $objToHide.fadeOut('slow', function(){ 
      $("."+content).fadeIn('slow') 
     }); 
    }); 

}); 

Попробуйте выше сейчас, с этим вы будете первым найти видимый элемент и исчезать его, когда событие FADEOUT будет сделано другой элемент будет исчезать в

.