This is a test using the ew expand_all and collapse_all callbacks to automatically scroll to the section currently being viewed. The issue is that when expand/collapse all is clicked, large amounts of content is suddenly added to–or removed from–the page. This new page length will often re-flow the page, causing the user to loose their place in the currently viewed content.
The Idea is to implement the following:
1. Create ‘section headers’ that will automatically update when the users scrolls past them.
<h2 id="section-1" class="section">Section Title</h2>
2. Add some javascript that will saved the currently viewed section id to a variable.
jQuery(document).ready(function () {
jQuery(document).on("scroll", onScroll);
var currSection = null;
});
function onScroll(event){
var scrollPos = jQuery(document).scrollTop();
jQuery('.section').each(function () {
var currElement = jQuery(this);
if (currElement.position().top <= scrollPos && currElement.position().top + currElement.height() > scrollPos) {
currSection = currElement.attr("id");
}
});
}3. After expand/collapse/set all is triggered, all call back will be created that will scroll the page automatically to the section header that was last viewed.
if(typeof currSection !== 'undefined' && jQuery('#' + currSection).length ){
setTimeout(function(){
scrollTarget = jQuery('#' + currSection).offset().top;
if(typeof colomatoffset !== 'undefined'){
scrollTarget = scrollTarget + colomatoffset
}
jQuery('html, body').animate({scrollTop:scrollTarget});
}, 700);
}Demonstration:
Scroll down a bit and then click the Expand All link placed in the header at the end of the menu. All ‘read more’ content should be expanded and then the page should scroll back to the section that was being viewed. The effect is more dramatic the further down the page is scrolled.
Section 1: Aaeton
Aaeton was a planet of the Aaeton system, in the Core Worlds region. During the Cold War between the Galactic Republic and the Sith Empire, an Imperial bioweapon activated on the planet. During the last days of the Republic, the government of Aaeton had authorization to allow its citizens to visit the generally off-limits neighboring world of Ragoon VI.
―Floria
Section 2: Aaghra
Aaghra was the first planet from the star Zug in the Zug system of the galaxy’s Core Worlds region, not far from Coruscant,[1] the most politically important planet in galactic history.[2] It was a moonless world of molten rock.[1]
Section 3: Aar
Aar was a planet[3] in the Aar system[1] of the Nijune sector,[2] part of the Outer Rim Territories.[1] It was homeworld to the Aar’aa species, reptilian sentients often employed as enforcers by the Hutts, a species known for its many crime lords.[3]
Section 4: Aargau
Aargau (pronounced /är-‘gou/)[5] was a planet in the Zug system of the Core Worlds region, not far from Coruscant and the Corellian Run. It was run by and served as the headquarters for the Bank of Aargau, which was part of the InterGalactic Banking Clan. Numerous other banks and corporations were also based on Aargau, including the Z-Gomot Ternbuell Guppat Corporation. Aargau was an exceptionally wealthy world, due both to its status as a financial center, as well as the planet’s vast reserves of rare and precious metals.
Section 5: Aargonar
Aargonar was a dusty, desert-climate planet located in the Borderland Regions of the Mid Rim.
The planet was known to house numerous Sarlacc.[2] It was also home to Hrumphs and Gouka dragons.[3]
