How to accordion scroll to top to open content in Bootstrap ?

Last Updated : 12 Aug, 2024

Bootstrap Accordions are so attractive to watch in action but when the accordion context element is so large there was a problem getting the active accordion top. but here you will learn how to achieve that facility with the help of a few lines of JavaScript code. Here we will use the scrolltop property to accomplish that facility in Accordion.

Syntax

It returns the scrollTop property.

element.scrollTop

It is used to set the scrollTop property

element.scrollTop = value

Example:

JQuery Code: All you have to create a normal Bootstrap Accordion and paste the below jquery code in script tag then the action will begin.

JavaScript

$('#accordion').on('shown.bs.collapse', function () {
   
    let panel = $(this).find('.in');
   
    $('html, body').animate({
        scrollTop: panel.offset().top
    }, 500);
   
});

Example: In this example we are following these steps

Accordion Setup: The HTML includes an accordion component with two collapsible sections, JavaScript and Python, styled using Bootstrap.
Bootstrap Integration: Bootstrap CSS and JS, along with jQuery and Popper.js, are used for styling and functionality.
Scroll to Open: The JavaScript code scrolls smoothly to the opened accordion section using $(‘html, body’).animate().
Panel Content: Each accordion section contains detailed information about JavaScript and Python, respectively.
Accordion Behavior: Clicking on a section header toggles the visibility of the content, with scrolling adjustment applied when the section opens.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Accordion scroll to open content</title>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
        crossorigin="anonymous">
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
        </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
        crossorigin="anonymous">
        </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 
        crossorigin="anonymous">
        </script>
    <script>
        $('#accordion').on('shown.bs.collapse', function () {

            let panel = $(this).find('.in');

            $('html, body').animate({
                scrollTop: panel.offset().top
            }, 500);

        });
    </script>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <span class="strong">
                        <a data-toggle="collapse" 
                           data-parent="#accordion" 
                           href="#collapseOne" id="predict">
                            JavaScript
                            <span class="caret"></span>
                        </a>
                    </span>
                </div>
                <div id="collapseOne" class="panel-collapse collapse">
                    <div class="panel-body">
                        <p>
                            Either you love it or hate it, 
                            but in the age of Microservice 
                            and REST API, you can not ignore
                            JavaScript. JavaScript was
                            once upon a time used only in 
                            client side(browser), 
                            but nodejs 
                            (execution engine/run time/web server) 
                            have made possible to run javascript 
                            on server side.JavaScript is everywhere 
                            –on Desktop/Server/Mobile.
                            You can create mobile web 
                            app with javascript and html5, which 
                            has lot of advantages like save
                            licensing cost $99 yearly to pay 
                            Apple or making IOS apps and you 
                            don’t have to purchase MAC laptop 
                            to make your IOS app(Apple’s app 
                            can only be made in MAC). 
                            JavaScript has stormed the web 
                            technology and nowadays small 
                            software ventures to fortune 500, 
                            all are using node js for web apps. 
                            Recently wordpress.com has rewritten
                            its dashboard in javascript, 
                            paypal also chose to rewrite some 
                            of its components in javascript.
                            Be it google/twitter/facebook, 
                            javascript is important for everyone.
                            It is used in applications like 
                            single-page applications,Geolocation APIs,
                            net advertisements, etc. However JavaScript
                            is quirky/dynamic/scripting/ functional 
                            oriented language, and it has its own 
                            idiosyncrasies. 
                            It is not scalable, it is good for 
                            some 3000 line of code but for a bigger app,
                            it becomes difficult to manage, read and debug. 
                            Also, not everyone is very much familiar 
                            to JavaScript. You might sometimes 
                            think that I do not know much of a 
                            JavaScript then “How to be JavaScript 
                            Developer without much knowledge of JavaScript?” 
                            To ease down our work,
                            some smart developers/companies have made 
                            compiler/transpiler which converts your 
                            other language code into javascript code. 
                            (Best of both worlds) C++: If you know C++, 
                            then it is possible to get it converted 
                            into JavaScript. Cheerp is a free compiler 
                            for open-source commercial projects 
                            as well as for closed source non 
                            commercial projects.It is the C++ 
                            compiler for the web.You just write 
                            a web application or port your 
                            existing one, all in C++. Cheerp 
                            will generate its JavaScript code 
                            that can run on any browser. 
                            Java: Java is a darling of open source, 
                            backed by Oracle /IBM/Google/Red hat. 
                            A maximum number of developers 
                            in the world are Java 
                            developers (around 10 million). 
                            Maximum number of projects in github 
                            and apache are based on Java.
                        </p>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <span class="strong">
                        <a data-toggle="collapse" 
                           data-parent="#accordion" 
                           href="#collapseTwo" id="aries">
                            Python<span class="caret"></span>
                        </a>
                    </span>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse">
                    <div class="panel-body">
                        <p>
                            Python is a widely used general-purpose, 
                            high level programming language. 
                            It was initially designed by
                            Guido van Rossum in 1991 and 
                            developed by Python Software Foundation. 
                            It was mainly developed for
                            emphasis on code readability, 
                            and its syntax allows programmers to 
                            express concepts in fewer lines of code.
                            Python is a programming language 
                            that lets you work quickly and integrate 
                            systems more efficiently.
                            There are two major Python 
                            versions- Python 2
                            and Python 3. Both are
                            quite different. Beginning with 
                            Python programming: 1)
                            Finding an Interpreter: Before we 
                            start Python programming, we need 
                            to have an interpreter to interpret
                            and run our programs.
                            There are certain online
                            interpreters like https:
                            //ide.geeksforgeeks.org/, 
                            http://ideone.com/ or
                            http://codepad.org/
                            that can be used to start Python 
                            without installing an interpreter. 
                            Windows:There are many interpreters
                            available freely to run Python 
                            scripts like IDLE 
                            ( Integrated Development Environment)
                            which is installed when you install 
                            the python software from 
                            http: //python.org/ Linux:
                            For Linux, Python comes bundled 
                            with the linux.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </center>
</body>

</html>

Output:

How to expand accordion from URL in Bootstrap ?

skyridetim

Improve

Article Tags :

How to accordion scroll to top to open content in Bootstrap ?

Syntax

Similar Reads

Thank You!

What kind of Experience do you want to share?