I just don’t know what you are referring to. I don’t even know what the heck to search for. For example, I am Googling the following words and phrases (quotes included) but get no useful results:
“bootstrap 4” safari problem accordion expand
Here’s another set of Google keywords that yield no useful results:
“bootstrap 4” accordion “ios” expand jumps to footer
For there being a “ton” of solutions specific to my opening post, those sneaky solutions sure are hiding quite well!
This, my friend, is why forums like this exist! When we cannot Google a solution, we ask others for kind assistance.
UPDATE #1: After much searching, I came across this page filled with example code. That page APPEARS to do what I want, but I am not sure. I am not sure, because none of the code works when I put it in the Footer in Blocs. For example, I tried this in the Footer, to no avail:
<script>
$("div.ui-collapsible-set").live("expand", function(e) {
var top = $(e.target).offset().top;
if ($(window).scrollTop() > top)
$(window).scrollTop(top);
});
</script>
I then thought that “ui-collapsible-set” might be a name used on his web page but not on mine, so I tried this variation, again with no success (that ID is the ID of the DIV containing the Accordion card):
<script>
$("div.accordion-3341").live("expand", function(e) {
var top = $(e.target).offset().top;
if ($(window).scrollTop() > top)
$(window).scrollTop(top);
});
</script>
I then tried this to no avail:
<script>
$("#accordion-3341").live("expand", function(e) {
var top = $(e.target).offset().top;
if ($(window).scrollTop() > top)
$(window).scrollTop(top);
});
</script>
So even when I have code, I am unsure how to use it, assuming it even works at all in light of how old that 2011 discussion is!
Again, this is why I seek help in forums like this!
UPDATE #2: I came across this Stack Overflow page, and used the following code in the Footer of my FAQ page:
<script>
jQuery(function($){
$('.card-header').each(function(){
let $card_header = $(this);
let $collapse_element = $card_header.next();
$collapse_element.on('show.bs.collapse', function () {
let $card_header_top = $card_header.offset().top;
let $visible_collapse = $('.collapse.show');
if($visible_collapse.length){
let $visible_collapse_top = $visible_collapse.offset().top;
if($visible_collapse_top < $card_header_top){
$card_header_top -= $visible_collapse.height();
}
}
$([document.documentElement, document.body]).animate({
scrollTop: $card_header_top
});
});
});
});
</script>
It’s a bit jerky, but it works. When you follow the steps of my opening post on an iPhone, for example, clicking “1480 Security System” shows you the footer very briefly, and then the code kicks in an quickly takes you to the top of that section, which is correct!
I would now like to extend my personal thanks to the dynamic trio Me, Myself & I for finally Googling up the correct code that seems to work! This is a copy/paste solution that doesn’t need to be tweaked for any given Blocs web page. Just remember to put it in the page Footer. Hope this helps others who follow along in my footsteps!
@TrevReav
Thank you for your kindness in testing. Please try my FAQ page again with the new code. It should perform better this time!