Product Tabs error on mobile devices

New Member
3 0 0

Hello!

 

I've already posted this on Feedback On My Store but didn't get any responses. Hoping someone here can help!

 

We have just launched our shopify website www.theunnamed.com.au

 

We have added code to the theme so that the product pages have expandable tabs (see first image). However, if a user is using Safari on their iOS mobile device, when they click on the tab they get the error message "Safari cannot open the page because the address is invalid". When they click OK the message goes away and the tab opens. The same thing happens when the tab is closed (see second & third image).

thumbnail_IMG_8863.png

IMG_8864.pngIMG_8865.png

0 Likes
Excursionist
16 5 6

Hello,

It looks like you don't have to use anchors in your tabs. Safari seems to have problems with "javascript:void(0)" script, which you use to prevent any action on a click of a link.

Since event listeners are set on a tab click, it doesn't matter what the tab is constructed with. I would suggest replacing the following:

<a href="javascrip:void(0)" class="">how to apply<i class="fa fa-plus"></i></a>

with something like:

<div class="expandable">how to apply<i class="fa fa-plus"></i></div>

and setting an event listener on that class. To mimic link you can also set "cursor: pointer;" css property on that class.

In case of any problems please message me and I would be able to recode this part of your theme for a small fee.

Thanks,
Lukasz

0 Likes
New Member
3 0 0

Thank you! I've managed the first part but I can't work how to set an event listener. How an I contact you?  

0 Likes
Excursionist
16 5 6

I've just sent you a private message :)

0 Likes