前端CSS HTML手风琴

Question

I have been trying to add a specific accordion to a site I'm working on, however, when the "+" is clicked for the tab to open and display content, this does not happen. The accordion tabs all remain closed but the screen does jump to the top whenever I press the accordion header"+'. Any help will be appreciated.

Code is provided below:

 .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 pa { 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

Did you get that code from planung-berlin.de? Do remember to copy the javascript files as well or the code won't work.

Try this:

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');
        });

    }
});