0

Hello—the dropdown accordion feature on this linked landing page on our site is not working. When you click the dropdown button, the accordion feature only stays open for a split second. This is a new glitch! Does anyone have any feedback on what may be causing this issue and how we may troubleshoot it? Thanks!

Improve this question
1
  • This isn't specifically an ExpressionEngine question, so I am closing this, but see the helpful answers below. Feel free to edit your question or ask a new question focusing more specifically on ExpressionEngine.
    – Alex Kendrick ♦
    Oct 11, 2018 at 12:58

3 Answers 3

Reset to default
1

If you are not a developer, you need a developer's help. Here is what is going on:

On the drop-down container elements, you have a class called visually-hidden, and the combo looks like this:

<style>
.visually-hidden {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}
</style>

<dd class="accordion-content visually-hidden" style="display: block;">
    ...hidden drop-down
</dd>

So it is hiding a block element by positioning it very far off of the visible area of the rendered document. When you initiate the drop-down expanding, the JS/library you are using removed the visually-hidden class from the drop-down container element, and the animation occurs as we would expect. But when the animation finishes, the visually-hidden class gets reapplied to the the drop-down container element, essentially re-hiding it and causing the drop-down visual area to re-collapse.

So whatever JS/JS library/jQuery library code you are using to script that UI interaction is incorrect.

I think this is a little broken past that from an engineering prospective (the path to allowing the container to be visible, enabling the animation, and then reverse in some manner).

Can you post the related code to how this accordion feature works? This will help us help you. It isn't clear how this is even ExpressionEngine related, but I still want to help.

Improve this answer
0

you might have asked this question in the wrong user group. https://expressionengine.stackexchange.com/tour

Apart from that, your dropdown works as expected in Chrome. Mac Version 69.0.3497.100 (Officiell version) (64 bitar)

Improve this answer
0

It is hard to know for sure what is going on - but I can see the error using Firefox 62 (Mac).

I would suspect that part of the problem is that the site is using jquery 1.12. This version of jQuery is quite old, and not being developed. It is quite possible that recent changes in some browsers (say Firefox) have caused it to respond to the old jQuery script in unexpected ways, while in others (e.g. chrome) different development paths mean that these changes in behaviour have not shown up.

It may be that you can find a rearrangement of the jquery / javascript driving your accordion that will side-step this problem, but a better long-term fix would be to begin thinking about updating your site to work with a newer (and supported) version of jQuery. The latest version is 3.3.1

HTH

Improve this answer
2
  • jQuery 1.12 is quite old, but still very stable in modern browsers. It is also still quite widespread w3techs.com/technologies/details/js-jquery/all/all . We'd have known if this was a major bug. Most likely a plugin, custom code, or the template outputting wrong.
    – jrothafer
    Oct 2, 2018 at 7:33
  • A problem with a plugin, custom code, or the template would not explain why it has only recently stopped working in some browsers, especially when it looks like the code driving the accordion has not changed. On face value, the only thing that appears to be changing here is the browser code - but what / when / where how remains a mystery.
    – JCOGS Design
    Oct 2, 2018 at 8:28

Not the answer you're looking for? Browse other questions tagged or ask your own question.