Effect in acordions in 4.3 canvas version

JjuanchpFeb 13, 2017

Good morning,
I discovered a nice effect using accordions in the new version 4.3. This is the example page:

http://themes.semicolonweb.com/html/canvas/faqs-4.php

When the user click over the accordion, the scroll goes to this specific section. I want to use it in a page in a previous version files (4.1), but I can not see what I need to change to use this effect. What I need to make this effect?

Thanks in advance,
Juan Carlos

JjuanchpFeb 13, 2017

Sorry... mistake.

SSemicolon WebSTAFFFeb 15, 2017

Hello,

You can simply find the following code in the js/functions.js File:

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");
				}
				return false;
			});
		});
	}
},

and replace it with:

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. Hope this Helps!

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

JjuanchpFeb 15, 2017

Resolved!!

Thank you very much!
Juan Carlos