Hello,
I applied the Accordion-widget to my first website but can’t solve to following problem: When I open the panel below the header, the browser scrolls down almost to the end of it, but no visitor wants to read the text from the end to the beginning. To find the beginning I have always to scroll upwards. For this reason I want to make the Accordion show after clicking the button in the header to stay at the top of the panel below. The best thing would be if the top of the header would stay at the top of the viewport. Neither in this Forum nor at Google I was able to find an answer, nor on Bootstrap itself where some attributes are explained. Google says the Position should be set on “sticky”, but this doesn’t work. I went to the options panel - Display & Sizing -Position.
Take a look at how the accordion functions on this website…
Is this the sort of behavior you’re looking for?
Thank you very, very much. This is exactly the behaviour I was looking for. I wish I would be able to understand the responsible script in detail, contained as it seems in “scrollaccordion.js”. Besides, according to the webpage owner, it is protected by copyright law.
I created the script, and built that website. The owner is one of my clients.
You are welcome to use the script if you like. In fact, here’s a newer version that’s actually a little better (I corrected a minor error in the old code), and this one allows you to have different scroll margins at mobile, tablet and desktop sizes (the reason for this is that some of my websites have navbars or other components above the navbar that only appear at certain screen sizes, which necessitates different scroll margins.)
const accordionItems = document.querySelectorAll('.accordion-collapse');
function getScrollOffset() {
const width = window.innerWidth;
if (width >= 768) {
return 120;
} else if (width >= 576) {
return 155;
} else {
return 185;
}
}
function scrollToAccordionItem() {
const offset = getScrollOffset();
const accordionItem = this.closest('.accordion-item');
window.scrollTo({
top: accordionItem.offsetTop - offset,
left: 0,
behavior: 'smooth'
});
}
accordionItems.forEach((el) => {
el.addEventListener('shown.bs.collapse', scrollToAccordionItem);
});
function resizeHandler() {
const offset = getScrollOffset();
const activeAccordionCollapse = document.querySelector('.accordion-collapse.show');
if (activeAccordionCollapse) {
const accordionItem = activeAccordionCollapse.closest('.accordion-item');
window.scrollTo({
top: accordionItem.offsetTop - offset,
left: 0,
behavior: 'smooth'
});
}
}
window.addEventListener('resize', resizeHandler);
So the specific lines that are responsible for the margin from the top are these…
if (width >= 768) {
return 120;
} else if (width >= 576) {
return 155;
} else {
return 185;
}
The default (XS) distance is 185 pixels
From SM to MD the distance is 155 pixels
MD to XXL the distance is 120 pixels
You can kind of see how the screen sizes are set… width >= 768 (greater than or equal to 768 pixels) which would mean MD and up screens
width >= 576 is SM screens
And the the last value return 185 is mobile
By changing the values, you can tailor your accordion to scroll where you want it, and at what screen widths.
If you only need one distance regardless of screen size, you can use this version of the script, and set the Fixed scroll offset value to whatever you want.
const accordionItems = document.querySelectorAll('.accordion-collapse');
// Fixed scroll offset value
const scrollOffset = 150;
function scrollToAccordionItem() {
const accordionItem = this.closest('.accordion-item');
window.scrollTo({
top: accordionItem.offsetTop - scrollOffset,
left: 0,
behavior: 'smooth'
});
}
accordionItems.forEach((el) => {
el.addEventListener('shown.bs.collapse', scrollToAccordionItem);
});
function resizeHandler() {
const activeAccordionCollapse = document.querySelector('.accordion-collapse.show');
if (activeAccordionCollapse) {
const accordionItem = activeAccordionCollapse.closest('.accordion-item');
window.scrollTo({
top: accordionItem.offsetTop - scrollOffset,
left: 0,
behavior: 'smooth'
});
}
}
window.addEventListener('resize', resizeHandler);
If you copy and paste the script in ChatGPT or Gemini or some other AI tool, you can ask it to analyze it and explain to you line-by-line what each piece of code does.
( 
Confession… I’m not that great at writing JavaScript. But if you know what you want to do, and know how to describe it in sufficient detail (and don’t mind doing some debugging with Dev Tools), you can usually get AI’s like ChatGPT to write scripts like this for you and get them working on your website. I use ChatGPT all the time now to write JavaScript that I used to spend hours trying to cobble together from websites like Stack Overflow, or looking at examples on Codepen.)
Thank you very much again for all the detailed and helpful information, and for your kind permission to use the scripts, too. The first one, I mean that from your website works fine, only the last few items behave a bit different. But this doesn’t matter. The others I will try out as soon as possible.
I don’t know, if I am allowed to describe here another problem I had in the last days. Besides the answer might be too simple: On one of my webpages I have many audio elements, and on the other pages also many of these elements, but on each page they shall get different CSS-rules. The problem is that when I create the rules on one page they are automatically applied to the other pages. According to that little what I know about CSS, you would regularly put the rules into the head section of the page just above the body, but in Bootstrap Studio I can’t enter. I tried for hours without success, at the end I changed the style attributes for each audio element separately, and there are dozens on each page.
Normally, it would be best to start a new post, since this is a totally different problem, but briefly…
The correct way to add CSS is to put the rules in a external stylesheet (or stylesheets) which are then linked to in the head of the page thusly…
<link rel="stylesheet" href="/essential_audio.css]">
(I used this as an example because Essential Audio Player is a free JS player that allows considerable CSS styling. I assume you’re using a third-party player that does something similar.)
This adding of the external stylesheet happens automatically in BSS whenever you add or import a CSS file into your design.
So to create a new CSS file for styling your audio player, go to the Design panel > Styles > New > CSS File, and give your file a name (ex. audioplayers.css). Now you’ll create all your styling rules for your player in this file, and BSS will reference it in the head when it exports your website.
To answer your question about the issues of styles affecting multiple instances of the audio player across different pages, this is expected behavior. This way to give different players that use the same CSS classes different appearances is to wrap them in divs and give those divs unique IDs. For example…
#playerOne .player-text {
color: red;
font-size: 24px;
}
#playerTwo .player-text {
color: blue;
font-size: 18px;
}
And so on…
Now you give the parent div of your first player the ID playerOne, the parent div of your second player the ID playerTwo, and so on. This allows you to style each individual player however you like, using the same CSS class names with different values for the rules.
If all the players on a page can look the same, you don’t need to wrap the players in separate divs. You can just assign the ID to that page’s body element, and then all the players on that page will have the styling of that ID.
If you wanted to forgo using IDs and create a unique CSS stylesheet for each page that could be done by adding a unique CSS file to each page’s head content using BSS’s visibility options (Design > Styles, then right-click on the CSS file, select “visibility” and set your page options) but having multiple CSS files with the same rules could get messy if you encounter browser caching issues. It’s really not the right solution.
The first method is really the correct way to do it. It allows you to keep all your audio styling in a single stylesheet, and style each player (or each page’s collective players) differently on a per-page basis.