[bcliffordParticipant]

Hello,

A website I manage seems to be having a couple issues with mobile. One of which is that the accordion shortcode isn’t working on mobile. I searched the forums for others who have asked this problem but have found their solutions are often customized and don’t fix the problem on my site.

The page I’m referring to is here: http://wellnesscentermn.com/our-services/float-tank/

Any suggestions would be great!

– Brooks

[Nabeel AModerator]

Hi Brooks,

Thanks for writing in! I see you’ve added CSS code in your Customizer Javascript. Please move it to Appearance > Customize > Custom > Edit Global CSS:.

Then add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($) {
	 $('.x-accordion-heading').on('click touchend',function(e) {
		e.preventDefault();
		parent = $(this).parents('.x-accordion-group');
		accBody = parent.find('.accordion-body');
		accHead = accBody.siblings('.x-accordion-heading').find('.x-accordion-toggle');
		accBody.toggleClass('in').animate({'height': '100%'}, 300);
	});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[bcliffordParticipant]

Great! That did the trick – so thank you.

One other issue that users have had on mobile is on this page: http://wellnesscentermn.com/pricing/ they can’t seem to toggle between the two tabs at the top (Massage & Float Tank). It works on desktop but not mobile.

Any suggestions with this?

– Brooks

[Paul RModerator]

Hi Brooks,

I can see your theme is version 4.6.2 but you are still using x-shortcodes plugin.

Please note that x-shortcodes has been replaced by cornerstone plugin.

Kindly deactivate and delete xshortcodes plugin and install cornerstone by navigating to Addons.

Make sure you have the following versions.

Version Compatibility

Updating Your Theme and Plugins

Hope that helps.

[bcliffordParticipant]

So when I went about doing that – it completely messed up the site. Do I need to go through each page and re-do all the shortcode that was added through x-shortcode?

The pages seemed to leak shortcode onto the front of them when I tried to make that switch.

[ChristopherModerator]

Hi there,

You don’t need to redo your pages. Please disable X shortcodes plugin and visit X addons page to install cornerstone automatically. Please note that cornerstone is a required plugin in x.
Installing CS won’t break the pages which were created with x shortcodes. Although we recommend you to use cornerstone page builder which is easier and faster to manage, but still you have can choose between editing pages with shortcodes or rebuilting them with CS.

Please check this link to learn more about cornerstone https://community.theme.co/kb/

Hope it helps.

[HyperbitsParticipant]

Hi there, I’m having a similar problem with the Cornerstone accordion not opening on mobile for this page: http://hyperbitsmusic.com/week-diane-2/

Originally, only the Masterclass Orientation link and Lesson 1 link were opening on click, and for the rest of them the hover state (underline) wasn’t working, as if they weren’t even links.

I just tried adding the Javascript code you suggested above, and now it seems none of them are opening BUT the hover state is working on all, so the touch is being recognized. Any ideas? My WordPress and all of my plugins are up to date. I did try turning some of the plugins off but didn’t find a conflict.

[LelyModerator]

Hi There,

I am getting this error:
Uncaught SyntaxError: Invalid or unexpected token
Look fort this custom code:

jQuery(document).ready(function($) {
if ( $(‘html’).hasClass(‘touchevents’) ) {
$(‘.vc_tta.vc_general .vc_tta-panel-title > a, .vc_tta.vc_general .vc_tta-panel-title > a’).off(‘click touchstart touchend’);
}
});

That code is using pretty quotes and not normal quotes. Update to this:

jQuery(document).ready(function($) {
if ( $('html').hasClass('touchevents') ) {
$('.vc_tta.vc_general .vc_tta-panel-title > a, .vc_tta.vc_general .vc_tta-panel-title > a').off('click touchstart touchend');
}
});

Hope this helps.

[HyperbitsParticipant]

Thanks for your quick response. That code with the pretty quotes was on the actual page instead of global JS, and it’s a proposed solution I had found on a different forum thread. I replaced it with the normal quotes, but no change. I had put it there after it didn’t do anything in the global JS, so I removed it from the Week Diane 2 page and tried putting it in the custom global JS again, and I’m back to the first problem, which is that the first two accordion items seem to function properly while the rest of them don’t even respond to the touch. I’m not sure which problem is closer to the actual solution. Any other ideas? Thanks again!

[HyperbitsParticipant]

Nevermind, I switched to accordion shortcodes and this seems to be working better. Thanks anyway!

[Nabeel AModerator]

Glad you’ve sorted it out.

Cheers!

[Author]

Posts