FAQ Accordion Not Working on Mobile – Rank Math FAQ Block

#859706
  • Resolved RH TASIN

    1 year, 3 months ago

    Rank Math free

    I followed the tutorial below published by rankmath: https://rankmath.com/kb/turn-faq-block-into-accordion/

    This is working fine on computer. Even is I resize the screen, it is working as it should be. But if I visit the website from a mobile then this accordion is not working. You can check this screenshot:

    I did some troubleshot. Here is what I did and what I find out.
    So first I only used the css and didn’t use the php code. I saw that the accordion is not working, just like the way it didn’t work on mobile. Then I used the PHP code and so it started to work fine but only on desktop.

    So what I think is maybe this problem is happening because of the php code. Maybe this code need to be modified to work on mobile too. As I do not know PHP and this tutorial was published by RankMath, so I am asking the RankMath team, please fix it.

    One more thing. I know the image you saw, the accordion is looking different. Because I have customized the CSS. But the RankMath CSS is also giving the same result.

    Hi Rank Math Team,

    I’m writing to report an issue with the FAQ accordion functionality in the Rank Math FAQ Block. I followed the helpful tutorial you provided here: Link to tutorial

    While the accordion works perfectly on desktop and resizes smoothly, it doesn’t function on mobile devices.

    For your reference, I’ve attached a screenshot showcasing the issue:

    Troubleshooting Steps Taken:

    I initially tried using only the CSS from the tutorial, but the accordion remained non-functional on mobile.
    When I added the PHP code, the accordion worked on desktop, but not on mobile.
    This leads me to believe the issue might be related to the PHP code requiring adjustments for mobile responsiveness. Unfortunately, I’m not familiar with PHP coding, and since the tutorial originates from Rank Math, I’d like to request your assistance.

    Additional Note:

    The screenshot might show a slightly different accordion style due to my custom CSS, but the issue persists even with the default Rank Math CSS.
    You can see the problem in live by visiting this URL: http://devsite.rf.gd/test-post/

    Thank you for your time and support. I look forward to your solution!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Miguel

    1 year, 3 months ago

    Hello,

    Thank you for contacting support.

    The code snippet from the tutorial you shared works on both desktop and mobile variations of the website but it seems that on your website you are not applying the code properly because the answers and questions are all expanded immediately when they should be hidden and then expanded with the help of the JavaScript added via the code snippet of the tutorial.

    Please share screenshots of all the code you have added, including the custom CSS, and the places where they were added so we can debug the issue further and advise.

    Looking forward to hearing back from you.

    RH TASIN

    1 year, 3 months ago

    Rank Math free

    If you need access to this demo website to check it for yourself then I can give you the access. Just let me know^^

    RH TASIN

    1 year, 3 months ago

    Rank Math free

    Hello, have you found any solution or have I done it wrong?

    Miguel

    1 year, 3 months ago

    Hello,

    Can you please explain where you are taking the rank_math() instance on the code?

    We don’t mention anywhere on the tutorial that this should be used so please remove it and try again.

    Thank you.

    RH TASIN

    1 year, 3 months ago

    Rank Math free

    I didn’t add that code. That code already exists in RankMath. I marked to say that I have added the RankMath Tutorial code after that code. You can see that below that code I have marked the actual code I added with a red square.

    Also, I have noticed that the accordion is now not working on the desktop too.

    Great

    1 year, 3 months ago

    Hello,

    1. The rank-math.php file does not require the rank_math() instance, so unless you’re using it for something custom, you should remove it.

    2. Have you tried implementing this without any customization to see if it works fine? Please try it and let us know. If it does, then the issue might be with your customizations.

    3. If none of the above works, then please share access to your website with us so we can investigate this issue further.

    Thank you for your patience and cooperation.

    RankBot

    1 year, 2 months ago

    Hello,

    Since we did not hear back from you for 15 days, we are assuming that you found the solution. We are closing this support ticket.

    If you still need assistance or any other help, please feel free to open a new support ticket, and we will be more than happy to assist.

    Thank you.

Viewing 6 replies - 1 through 6 (of 6 total)

The ticket ‘FAQ Accordion Not Working on Mobile – Rank Math FAQ Block’ is closed to new replies.