フロントエンドCSS HTML Accordion

Question

私は、作業中のサイトに特定のアコーディオンを追加しようとしましたが、「+」をクリックしてタブを開いてコンテンツを表示すると、これは起こりません。アコーディオンタブはすべて閉じたまま私はアコーディオンヘッダ「+」を押すたびに画面が一番上にジャンプしないすべてのヘルプは理解されるであろう

コードを以下に提供されています。。

.accord-tab-box { 
 
    padding-top: 40px; 
 
    padding-bottom: 20px; 
 
} 
 

 
.accordion-box { 
 
    margin-bottom: 20px; 
 
} 
 

 
.accord-elem { 
 
    margin-bottom: 20px; 
 
} 
 

 
.accord-title { 
 
    padding: 16px 14px; 
 
    border: 1px solid #dbdbdb; 
 
    position: relative; 
 
} 
 

 
.accord-title h5 { 
 
    padding-right: 48px; 
 
} 
 

 
.accord-title h5 i { 
 
    color: #007aff; 
 
    font-size: 20px; 
 
    vertical-align: middle; 
 
    margin-right: 12px; 
 
} 
 

 
a.accord-link { 
 
    display: inline-block; 
 
    position: absolute; 
 
    width: 46px; 
 
    height: 100%; 
 
    top: 0; 
 
    right: 0; 
 
    border-left: 1px solid #dbdbdb; 
 
    background: url('/Content/myTemplate/images/add.png') center center no-repeat; 
 
    transition: all 0.2s ease-in-out; 
 
    -moz-transition: all 0.2s ease-in-out; 
 
    -webkit-transition: all 0.2s ease-in-out; 
 
    -o-transition: all 0.2s ease-in-out; 
 
} 
 

 
.accord-elem.active a.accord-link { 
 
    background: url('/Content/myTemplate/images/add.png') center center no-repeat; 
 
} 
 

 
a.accord-link.opened { 
 
    background: url('/Content/myTemplate/images/substract.png') center center no-repeat; 
 
} 
 

 
.accord-content { 
 
    display: none; 
 
    padding: 22px; 
 
    border: 1px solid #dbdbdb; 
 
    border-top: none; 
 
    overflow: hidden; 
 
} 
 

 
.accord-content span.image-content { 
 
    display: inline-block; 
 
    float: left; 
 
    width: 68px; 
 
    height: 68px; 
 
    border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    -o-border-radius: 50%; 
 
    margin-right: 22px; 
 
    background: #007aff; 
 
} 
 

 
.accord-content span.logo-content { 
 
    display: inline-block; 
 
    float: left; 
 
    width: 110px; 
 
    margin-right: 15px; 
 
} 
 

 
.accord-content span.image-content i { 
 
    color: #fff; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    width: 100%; 
 
    line-height: 68px; 
 
    vertical-align: middle; 
 
} 
 

 
.accord-content span.logo-content i { 
 
    color: #fff; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    width: 100%; 
 
    line-height: 68px; 
 
    vertical-align: middle; 
 
} 
 

 
.accord-elem.active .accord-content { 
 
    display: block; 
 
} 
 

 
.why-convertible-box { 
 
    padding-top: 60px; 
 
} 
 

 
.why-convertible-box h1 { 
 
    margin-bottom: 10px; 
 
} 
 

 
.why-convertible-box h1 span { 
 
    font-weight: 600; 
 
} 
 

 
.why-convertible-box h1 i { 
 
    color: #0a9dbd; 
 
    margin-left: 10px; 
 
} 
 

 
.why-convertible-box p { 
 
    margin-bottom: 15px; 
 
} 
 

 
.why-convertible-box p a { 
 
    color: #0076f9; 
 
    font-weight: 700; 
 
}

<div class="why-convertible-box"> 
 
    <div class="container"> 
 
    <h1>Why choose <span>PosWorx</span><i class="fa fa-question-circle"></i></h1> 
 
    </div> 
 
</div> 
 

 

 
<div class="accord-tab-box"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
     <div class="accordion-box"> 
 

 
      <div class="accord-elem"> 
 
      <div class="accord-title"> 
 
       <h5><i class="fa fa-money fa-fw"></i>Sales</h5> 
 
       <a class="accord-link" href="#"></a> 
 
      </div> 
 
      <div class="accord-content"> 
 
       <p>Posworx offers rental packages which make our system both affordable and hassle-free. With minimal upfront costs and an all-inclusive monthly rental, we've got you covered.</p> 
 
      </div> 
 
      </div> 
 

 
      <div class="accord-elem"> 
 
      <div class="accord-title"> 
 
       <h5><i class="fa fa-star fa-fw"></i>Returns</h5> 
 
       <a class="accord-link" href="#"></a> 
 
      </div> 
 
      <div class="accord-content"> 
 
       <p>Posworx consistently strives to deliver a robust hardware and software solution that is both industry leading and hardened.</p> 
 
      </div> 
 
      </div> 
 

 
      <div class="accord-elem"> 
 
      <div class="accord-title"> 
 
       <h5><i class="fa fa-wrench fa-fw"></i>On-Site Support</h5> 
 
       <a class="accord-link" href="#"></a> 
 
      </div> 
 
      <div class="accord-content"> 
 
       <p>We offer professional onsite support with all our contract options with the highest technician to customer ratio in the country you are assured prompt, professional service always.</p> 
 
      </div> 
 
      </div> 
 

 
      <div class="accord-elem"> 
 
      <div class="accord-title"> 
 
       <h5><i class="fa fa-tty fa-fw"></i>Laybyes</h5> 
 
       <a class="accord-link" href="#"></a> 
 
      </div> 
 
      <div class="accord-content"> 
 
       <p>Helpdesk service 24/7/365 which caters for telephone and remote network support.</p> 
 
      </div> 
 
      </div> 
 

 
      <div class="accord-elem"> 
 
      <div class="accord-title"> 
 
       <h5><i class="fa fa-desktop fa-fw"></i>Bio Metric Support</h5> 
 
       <a class="accord-link" href="#"></a> 
 
      </div> 
 
      <div class="accord-content"> 
 
       <p>Unlimited classroom environment training sessions in our main centres ensures you get the most from your investment.</p> 
 
      </div> 
 
      </div> 
 

 
      <div class="accord-elem"> 
 
      <div class="accord-title"> 
 
       <h5><i class="fa fa-thumbs-up fa-fw"></i>User-Friendly Solution</h5> 
 
       <a class="accord-link" href="#"></a> 
 
      </div> 
 
      <div class="accord-content"> 
 
       <p>Our product has evolved through constant feedback from the industry over the past 30 years. This has resulted in a user-friendly software solution that is both practical and functional.</p> 
 
      </div> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 

 
     <div class="col-md-6"> 
 
     <div class="accordion-box"> 
 

 
      <div class="accord-elem"> 
 
      <div class="accord-title"> 
 
       <h5><i class="fa fa-calculator fa-fw"></i>Inter Branch Transfers</h5> 
 
       <a class="accord-link" href="#"></a> 
 
      </div> 
 
      <div class="accord-content"> 
 
       <p>Easily manage the core element of your business by tracking stock shortages as well as optimising your order levels to ensure maximum profit.</p> 
 
      </div> 
 
      </div> 
 

 
      <div class="accord-elem"> 
 
      <div class="accord-title"> 
 
       <h5><i class="fa fa-bar-chart fa-fw"></i>Time and Attendance</h5> 
 
       <a class="accord-link" href="#"></a> 
 
      </div> 
 
      <div class="accord-content"> 
 
       <p>To help you improve your operational efficiencies through analysis.</p> 
 
      </div> 
 
      </div> 
 

 
      <div class="accord-elem"> 
 
      <div class="accord-title"> 
 
       <h5><i class="fa fa-exchange fa-fw"></i>Easy Integration</h5> 
 
       <a class="accord-link" href="#"></a> 
 
      </div> 
 
      <div class="accord-content"> 
 
       <p>Posworx systems easily integrate with well over 25 programs to ensure you can provide your customs with more services on payment options, loyalty programs and so much more while making your life easier.</p> 
 
      </div> 
 
      </div> 
 

 
      <div class="accord-elem"> 
 
      <div class="accord-title"> 
 
       <h5><i class="fa fa-tablet fa-fw"></i>Posworx Mobile</h5> 
 
       <a class="accord-link" href="#"></a> 
 
      </div> 
 
      <div class="accord-content"> 
 
       <p>We utilize the latest technology to ensure that all your vital store information is available to you anytime, anywhere with our WEB APP and SMS feature.</p> 
 
      </div> 
 
      </div> 
 

 
      <div class="accord-elem"> 
 
      <div class="accord-title"> 
 
       <h5><i class="fa fa-cloud fa-fw"></i>Backup to Cloud</h5> 
 
       <a class="accord-link" href="#"></a> 
 
      </div> 
 
      <div class="accord-content"> 
 
       <p>Posworx strives for constant improvement, innovation and integration.</p> 
 
      </div> 
 
      </div> 
 

 
      <div class="accord-elem"> 
 
      <div class="accord-title"> 
 
       <h5><i class="fa fa-info-circle fa-fw"></i>Posworx Interactive Reports</h5> 
 
       <a class="accord-link" href="#"></a> 
 
      </div> 
 
      <div class="accord-content"> 
 
       <p>Posworx has a rapidly growing customer base of well over 5000 customers incorporating over 60 national franchises and an international footprint.</p> 
 
      </div> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

を？

Answer 1

はあなたにもJavaScriptファイルをコピーすることを忘れないでくださいplanung-berlin.deからそのコードを手に入れたかのコードは動作しません

これを試してみてください：。

はJavaScript：

$(document).ready(function($) { 
    var clickElem = $('a.accord-link'); 

    clickElem.on('click', function(e){ 
    e.preventDefault(); 

    var $this = $(this), 
     parentCheck = $this.parents('.accord-elem'), 
     accordItems = $('.accord-elem'), 
     accordContent = $('.accord-content'); 

    if(!parentCheck.hasClass('active')) { 

     accordContent.slideUp(400, function(){ 
      accordItems.removeClass('active'); 
     }); 
     parentCheck.find('.accord-content').slideDown(400, function(){ 
      parentCheck.addClass('active'); 
     }); 

    } else { 

     accordContent.slideUp(400, function(){ 
      accordItems.removeClass('active'); 
     }); 

    } 
});