Open In App

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Bootstrap Accordions are so attractive to watch in action but when the accordion context element is so large there was a problem to get 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 achieve that facility in Accordion.

Syntax:

  • It returns the scrollTop property.
    element.scrollTop
  • It is used to set the scrollTop property
    element.scrollTop = value

Example:

  • JavaScript Code: All you have to create a normal Bootstrap Accordion and paste the below JavaScript code int script tag then the action will begin.




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

    
    

  • Program:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Accordion scroll to open content</title>
        <link rel="stylesheet" href=
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
    crossorigin="anonymous">
        <script src=
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
    crossorigin="anonymous">
        </script>
        <script src=
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
    crossorigin="anonymous">
        </script>
        <script src=
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 
    crossorigin="anonymous">
        </script>
        <script>
            $('#accordion').on('shown.bs.collapse', function() {
      
                var 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 node 
                              js (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:



Last Updated : 30 Sep, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads