Sliding Multiple Hidden Sections Error on Mobile

Support
#1

I have written a bit of script to slide hidden sections into view when a button is clicked. These sections slide up over another section using a slideToggle script and stop before they overlap the next section. It looks great on all devices except mobile phones. On mobile phones the button “Destination Details” slides up beyond where it is supposed to stop. The background color of the button is also not displaying correctly on mobile.

Am I trying to accomplish this the wrong way? What am I missing for the mobile view?

Here is the URL of the page - I’m working on the “Athens” section:

Here is the script:

Query(document).ready(function($){
	$('#athens.expand').slideToggle(0);
    $('#athens-expand').on('touched click', function(){
       $('#athens.expand').slideToggle( "slow" );
      $('#athens.pic').slideToggle( "slow" );
      
    });
});
#2

Hi there,

I checked your code and couldn’t find why this is happening in mobile view, I suggest that you use the accordion elements in cornerstone to achieving the same effect. For more information:

http://demo.theme.co/integrity-1/shortcodes/accordion/

A good points regarding the use of accordion is that you can disable it or hide it in mobile view using Sections and use another method to show your information in mobile actually each section in cornerstone has that ability using hide element functionality, try to make use of that to make sure your mobile view is best suited for mobile devices:

Thank you.

#3

Thanks for the reply. I am under the impression (through several support posts/trying it myself) that the accordion is really quite limited on styling and cannot accommodate hiding full sections which is the only way I’m aware of to accomplish what I’m doing.

Is there a way to control sections through the accordion? or is there a better way in general to achieve the desired effect?

#4

Hello There,

Thanks for updating in! I’ve inspected your code and there is something off about it. You may use this instead:

Query(document).ready(function($){
	$('#athens.expand').slideToggle(0);
    $('#athens.expand').on('touchend click', function(){
       $('#athens.expand').slideToggle( "slow" );
      $('#athens.pic').slideToggle( "slow" );
      
    });
});

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Thank you for your understanding.

#5

Thanks for your reply! I decided to restructure the sections to only slide one section at a time and hide the open click element with an element to close it.

Thanks for taking a look.

#6

Hello There,

We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

Best Regards.