Javascript for scrolling to the top of selected panel in customised accordion
Question
I have a large accordion with a vertical scroll bar. I need a javascript to smoothly scroll the selected panel and its contents to the top of the accordion when a user clicks on it. Click on Panel 1 and then on Panel 2. Panel 2 displays its contents midway.
I have seen several answers related to jQuery ui accordions and plugins in this website and on jsfiddle.net but the structure of my accordion isn't similar to the one in jQuery. This is my first website and I am new to javascript and jQuery.
I have a javascript that works fine with the sliding feature and would very much like to keep it. I prefer not to use any jQuery plugin until I learn how to do so with confidence. Could someone please be kind enough to modify my javascript to accomodate the scrolling function? Have tried reading many stuff such as getting the panel's content height and using a scroll to function etc. but after three long days I am still struggling to put together a script that works. Please find attached my html and javascript code. Thank you very much for any help and assistance.
enter code here
/*jQuery time*/ $(document).ready(function() { $("#accordian h3").click(function() { //slide up all the link lists $("#accordian ul ul").slideUp(); //slide down the link list below the h3 clicked - only if its closed if (!$(this).next().is(":visible")) { $(this).next().slideDown(); } }) })
* { margin: 0; padding: 0; } #description { position: relative; top: 200px; width: 300px; height: 400px; border: 2px solid blue; } #accordian { font-family: arial, helvetica, sans-serif; background: #006F70; position: relative; top: 10px; width: 250px; margin: 0px 16px 0 16px; color: white; }
<html> <head> <link href="accordianFABtest-GS.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="description"> <div id="accordian"> <ul> <li> <h3>Panel 1</h3> <ul> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> </ul> </li> <li> <h3>Panel 2</h3> <ul> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> </ul> </li> <li> <h3>Panel 3</h3> <ul> <li><a href="#">Content 3</a> </li> <li><a href="#">Content 3</a> </li> <li><a href="#">Content 3</a> </li> <li><a href="#">Content 3</a> </li> <li><a href="#">Content 3</a> </li> <li><a href="#">Content 3</a> </li> </ul> </li> <li> <h3>Panel 4</h3> <ul> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> </ul> </li> </ul> </div> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script src="accordian1.js" type="text/javascript"></script> </body> </html>
1 answers
solution1
0 2014-09-30 02:26:01
I edited your css and set the min-height for your panel content. please see the code snippet below. I hope this helps!
/*jQuery time*/ $(document).ready(function() { $("#accordian h3").click(function() { //slide up all the link lists $("#accordian ul ul").slideUp(); //slide down the link list below the h3 clicked - only if its closed if (!$(this).next().is(":visible")) { $(this).next().slideDown(); } }) })
* { margin: 0; padding: 0; } #description { position: relative; top: 200px; width: 300px; height: 400px; border: 2px solid blue; } #accordian { font-family: arial, helvetica, sans-serif; background: #006F70; position: relative; padding: 10px 0px; width: 250px; color: white; } // added line #accordian ul li ul{ max-height: 200px; overflow-y: auto; }
<html> <head> <link href="accordianFABtest-GS.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="description"> <div id="accordian"> <ul> <li> <h3>Panel 1</h3> <ul> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> <li><a href="#">Content 1</a> </li> </ul> </li> <li> <h3>Panel 2</h3> <ul> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> <li><a href="#">Content 2</a> </li> </ul> </li> <li> <h3>Panel 3</h3> <ul> <li><a href="#">Content 3</a> </li> <li><a href="#">Content 3</a> </li> <li><a href="#">Content 3</a> </li> <li><a href="#">Content 3</a> </li> <li><a href="#">Content 3</a> </li> <li><a href="#">Content 3</a> </li> </ul> </li> <li> <h3>Panel 4</h3> <ul> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> <li><a href="#">Content 4</a> </li> </ul> </li> </ul> </div> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script src="accordian1.js" type="text/javascript"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Javascript accordion close header/panel if selected
Accordion Panel Content Not Scrolling
Why is Foundation 6's accordion scrolling to the top of the page and not expanding the selected tab?
Scrolling to top inside an accordion
Scroll to the top of a selected accordion button
Bootstrap accordion scroll to top of active panel heading
Bootstrap Accordion - change the position of top panel when collapse
JavaScript Accoridon - Auto scroll to top of open accordion
Accordion needs to scroll to the top upon opening Javascript
Detect scrolling on top of webpage with javascript
Related Tags