Accordion - large content

4 replies · opened Oct 12, 2016

Mmedia.llOct 12, 2016

I have a problem when filling accordion content divs with large content. When I screen the bottom of the content and click on the next tab to open it - the content closes but the position stays there where it was before. This means for the user he has to manually scroll to top to see the new opened content.

I found a solution here: http://www.stampede-design.com/blog/2013/04/improving-navigation-on-large-accordion-content-panels/#.V_6TMPlIC70
This page shows also a negative and positive example to get a better understanding of the problem.

How can I implement a similar solution in Canvas template?

Can I just edit functions.js somehow to make it work like the mentioned solution?

Please advise!
Thx!

Mmedia.llOct 13, 2016

Any idea?

SSemicolon WebSTAFFOct 14, 2016

Hello,

We Really Apologize about the Delay in replying to your Support Query! This is Definitely Possible. Please add the following JS Code in the js/functions.js File replacing the entire accordions: function() Function Block:

accordions: function(){
	var $accordionEl = $('.accordion');
	if( $accordionEl.length > 0 ){
		$accordionEl.each( function(){
			var element = $(this),
				elementState = element.attr('data-state'),
				accordionActive = element.attr('data-active');

			if( !accordionActive ) { accordionActive = 0; } else { accordionActive = accordionActive - 1; }

			element.find('.acc_content').hide();

			if( elementState != 'closed' ) {
				element.find('.acctitle:eq('+ Number(accordionActive) +')').addClass('acctitlec').next().show();
			}

			element.find('.acctitle').click(function(){
				if( $(this).next().is(':hidden') ) {
					element.find('.acctitle').removeClass('acctitlec').next().slideUp("normal");
					var clickTarget = $(this);
					$(this).toggleClass('acctitlec').next().slideDown("normal", function(){
						$('html,body').stop(true).animate({
							'scrollTop': clickTarget.offset().top - ( SEMICOLON.initialize.topScrollOffset() - 40 )
						}, 800, 'easeOutQuad' );
					});
				}
				return false;
			});
		});
	}
},

This will Definitely work fine! Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Mmedia.llOct 14, 2016

works as it should! Thank you for your brilliant support. Thats why I extended paid support and will do again ...

SSemicolon WebSTAFFOct 15, 2016

Hello,

Really Glad that your Issues were resolved and Thank you so much for considering to buy Extended Support! We are Very Happy to Help!

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard