Accordion Strangeness on iOS [SOLVED]

I am curious if this problem is specific to the accordion used in Blocs or all accordions. Please open my website FAQ page below on a desktop computer using Safari:

Click “General Help” to expand it, and then click the “Q13: Dash Cams” link to jump you to the bottom of the “General Help” section (I wish it would smooth scroll, but oh well!). Now click “1480 Security System” and note that General Help closes and you are taken to the TOP of the “1480 Security System” section. This is correct and the proper way any accordion should work. Bravo! But alas, now comes the bad news…

Either use the Xcode Simulator app or a real iPhone or iPad to open that same page and try the same things, in the order I specified. Note that regardless of whether you use an iPhone or iPad, and regardless of the physical size of your device, when you tap on “1480 Security System,” you are NOT take to the TOP of that section! It’s even worse on a small screen iPhone where you only see the footer!

So is this a bug in Blocs’ implementation of an Accordion? Does this happen to all accordions? And, is there a workaround for this bad functionality?

Thank you.

Hi @JDW, just tried this my Mac using Safari and I’m seeing the iPhone description.
When that accordion is opened, it doesn’t scroll to the top of it, I’m seeing Q10 and Q11 from this accordion section, and the headings for 1460 and 2460.
However, on services also built with Blocs, it seems to scroll to the top of each section on smaller screens, so no help here - just reporting back!

1 Like

Seems to be the way Safari handles it. So its not a blocs issue, it is a browser one.

1 Like

But you must admit it’s pretty much broken functionality. We must also admit that most Mac users use Safari. So the question at this point is, what’s the work around? :slight_smile:

You will find plenty of example solutions online for this. Just make sure they are referring to Bootstrap 4 not 3, as they are very different for accordions.

However, in my example in the earlier post, it goes to the top of each section in Safari on Mac, iPhone and iPad. Not a clue why!

If you could kindly provide a link to one of those online examples (which actually provides a real-world Safari solution for what I am talking about), it would save me a huge amount of time. Thanks!

So I use my time, to save you time ? :smirk:

There are tons of them around.

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!

:partying_face: 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! :slight_smile: 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!

Yep, all seems fine now.

1 Like

@jdw all 3 examples are functions and you are not calling them, that’s why they don’t work.

They do work. Did you not watch the iPhone video I made for you? It’s just a matter of how the links work on an iPhone. Again, please see my video.

The question in my previous post still remains… What specifically did you do in Blocs to implement that smooth scrolling?

Thanks.

@JDW you’r mixing subjects, this topic and my reply here is about this…

I am very about that, my friend! My age is showing again. I get email notifications, speed-read your comments there, then click “Visit Topic” and quickly post my remarks. I didn’t notice the thread difference until you mentioned it just now.

The good news is, I am using the following code placed in the Footer to both handle the Accordion collapse smoothly and also smooth scroll to my anchor links within that same Accordion:

<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
      });
    });
  });
});

$('#bloc-16').on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();
    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});
</script>

NOTE: You would normally use document instead of #bloc-16 in the jQuery code above, but document stopped my navigation menu from working, so I had to limit the scope to the specific Bloc in which my FAQ content was used, which just happens to have an ID named bloc-16.

The following CSS goes in the Header to make the Accordion collapse less jarring:

<style>
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height .2s ease;
       -o-transition: height .2s ease;
          transition: height .2s ease;
}
</style>

You can save code by not replicating all the default styles, just list the ones your adding or over-ridding…
So you could just put

<style>
.collapsing { -webkit-transition: height .2s ease; -o-transition: height .2s ease; transition: height .2s ease;}
</style>

For reference the BS default class is the following, which is actually slightly slower.

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    transition:height .35s ease
}

Thanks. I’ve deleted the position, height & overflow, per your advice.

True, but prior to my adding that .collapsing{} CSS, my Accordion was collapsing with 0 delay for some unknown reason. I then added that CSS code with a .35s setting but found it a tad slow, which is why I subsequently decreased it to .2s. That made it faster, yet not as jarring as 0s.

Weird. Maybe Blocs overrides something. I know the toggle option in Blocs is not the standard one.

1 Like