CODEWITHSUNDEEP
javascriptjqueryscrollaccordion
user1610904
user1610904

Reputation: 397

Jquery Accordion - Make Clicked element scroll to top of page

I am using this accordion script for an FAQ page: http://www.snyderplace.com/demos/accordion.html

It's great except for one problem which is especially evident on mobile devices. When you click on a question and it has a lot of content inside, it expands upwards off the screen, to where you have to scroll up to see the question and the beginning of the content.

Ideally I'd like to have it to where the script scrolls the question to the top of the page/viewport when you click on it. If anyone has an idea of what to tweak in the script that would be amazing!

Upvotes: 1

Views: 1211

Answers (1)

Sue
Sue

Reputation: 378

You may try something like this. You don't need a plugin for an accordion:

Edited version with icons, default open, and touch enabled scroll to top

https://jsfiddle.net/07fdq3t1/10/

Add the class show to the one you want to open.

This could probably be written more efficiently as there's repeating code, but it should work.

jQuery

$(document).ready(function() {
    $('.accordion').click(function(){
        if($(this).next('.container').is(':visible')) {
            $(this).removeClass('show');
            $(this).next('.container').slideUp();
        }
        else {
            $('.accordion').find('.container:visible').slideUp();
            $('.accordion').removeClass('show');
            $(this).addClass('show');
            $(this).next('.container').slideDown();
        }         
    });
    $('.accordion').on( "touchstart", function(){
        if($(this).next('.container').is(':visible')) {
            $(this).removeClass('show');
            $(this).next('.container').slideUp();
        }
        else {
            $('.accordion').find('.container:visible').slideUp();
            $('.accordion').removeClass('show');
            $(this).addClass('show');
            $(this).next('.container').slideDown();
            $('html, body').animate({
                scrollTop: $(this).offset().top
            }, 200);
        } 
    });
});

HTML

<div class="accordion">Heading<span></span></div>
    <div class="container">
        <div class="content">
            <div>Sample Content</div>
            <p>Content here....</p>
        </div>
    </div>
<div class="accordion">Heading<span></span></div>
    <div class="container">
        <div class="content">
            <div>Sample Content</div>
            <p>Content here....</p>
        </div>
    </div>
<div class="accordion show">Heading<span></span></div>
    <div class="container">
        <div class="content">
            <div>Sample Content</div>
            <p>Content here....</p>
        </div>
    </div>
<div class="accordion">Heading<span></span></div>
    <div class="container">
        <div class="content">
            <div>Sample Content</div>
            <p>Content here....</p>
        </div>
    </div>

Note you will need to include jQuery in your code.

Upvotes: 4

Related Questions