Collapsing section

[deranaloge]

hi there,

i tried to archive a collapsing section with javascript. i found a post on the old apex forum:

Topic: Collapsible complete section accordion-style (javascript jquery...

i gave the id and classes changed the script, but now it does not work. (i applied the script in themeoptions => global js)
the sections is collapsed full but i cant open.
what i want. the section should be open say 150px
when i press the button in the middel (triangle) the section should be fully open. and close if i press the button again.

i dont know why the script is not working. it should i think since some users wrote it worked perfectly.

hope anyone can help me out…

many many thanks in advance!

cheers
harry

[ruenel]

Hello Harry,

Thank you for your detailed post information.

I have logged in to your site and I created a test page for you. Please see the secure note.

I am using this custom JS code by the way:

jQuery(document).ready(function($){
  $('.section-expandable').hide();
  
	$('.section-trigger').each(function(){
		$(this).on('click touchstart',function(e){
			e.preventDefault();			
			$('.section-expandable').slideToggle('slow');			
		});
	});
});

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Best Regards.

[deranaloge]

hi,

thanks for your help. i got it now how that works.
i understand that custom code is out of your scope.

but is it possible to help me out with one more thing?
is it possible not to hide the complete section? it should collapsed to eg. 100px. then press the button expand to full height.

is that possible?

thanks again!

cheers

[jade]

Hey Harry,

That would require further changes to the code @RueNel provided. To get you started, you will have to change the following line in the code:

 $('.section-expandable').hide();

This line completely hides the entire section. Try changing it to a JS code that will set the height of the section to 100px instead. You can make use of jQuery CSS function for that.

Then you will also have to change $('.section-expandable').slideToggle('slow'); to set the height of the section to 100% or auto.

Hope this helps you get started.

Cheers!

[deranaloge]

hi,

thanks for your answer and help.
i still dont get it. is there someone from themeco that does such custom coding?
or where can i look?

thanks in advance

[rad]

Hi Harald,

Unfortunately, we could only provide the idea of how it can be done but we can’t provide full customization of the code. And this is jQuery specific code too which maybe complex depending to the structure or layout of the content or section. I recommend contacting a developer familiar with jQuery and web design. I can’t personally recommend anyone here in the forum.

Thanks!