Support ForumToggle a accordion section through a menulink (url) – Support Forum

Toggle a accordion section through a menulink (url)

Bram — Fri, 29 Sep 2017 13:26:59 +0000

Hi there!

I like to toggle a accordion section true a menulink (url. I tried to link to an anchor point in de title and thats work fine. But now I want to open that section of the accordion by clicking de menuitem.

Is there a whay to Toggle that section like #ElementID/[toggle] ?

Thanks in advance!

Reply To: Toggle a accordion section through a menulink (url)

IshYoBoy — Mon, 02 Oct 2017 07:14:54 +0000

Hey,

Just to be sure we understand you have a link in your main menu linking to that given toggle and would like to be opened when a user clicks on the link in the menu?

If this is right, then unfortunately this is not implemented. It will have to be implemented separately.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Toggle a accordion section through a menulink (url)

Bram — Tue, 03 Oct 2017 18:37:34 +0000

Hi!

That is exactly what I mean.
Can you please explain how I implement that?

Thanks.

Reply To: Toggle a accordion section through a menulink (url)

IshYoBoy — Wed, 04 Oct 2017 06:00:31 +0000

Hi Bram,

here is simple javascript example what you can use for opening toggle/accordion via anchor link. Don’t hesitate adjust this code exactly as you need.

function ishAnchorOpenTggAcc() {
	var anchorLink = jQuery( document.location.hash );
	if ( anchorLink.hasClass( 'ish-sc_tgg_acc_item' ) ) {
		anchorLink.parent().find('.ish-tgg-acc-content').slideUp().prev().removeClass('ish-active');
		anchorLink.find('.ish-tgg-acc-content').slideDown().prev().addClass('ish-active');
	}
}

ishAnchorOpenTggAcc();

function ishAnchorOpenTggAcc() {

var anchorLink = jQuery( document.location.hash );

if ( anchorLink.hasClass( 'ish-sc_tgg_acc_item' ) ) {

anchorLink.parent().find('.ish-tgg-acc-content').slideUp().prev().removeClass('ish-active');

anchorLink.find('.ish-tgg-acc-content').slideDown().prev().addClass('ish-active');

}

ishAnchorOpenTggAcc();

Simple add this short code into your child theme js file.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Toggle a accordion section through a menulink (url)

Bram — Thu, 05 Oct 2017 18:19:06 +0000

Hi!

I am afraid this goes above my head..

Do I have to make a new js file with above content and place it in een new ‘assets/js’ folder in the childtheme? If so, what name should I give him?

Or am I totally wrong? )-:

Cheers!

Reply To: Toggle a accordion section through a menulink (url)

IshYoBoy — Fri, 06 Oct 2017 08:26:16 +0000

Hi Bram,

yes you’re right.
Simple create file my-custom.js in /assets/js/my-custom.js of your child theme.

And into the file my-custom.js insert js code. Code provided above was simple example, here is solution for you, that should works with your theme.

var ish = {}

// Smooth scroll -------------------------------------------------------------------------------------------------------
ish.activate_smooth_scroll = function (){

	jQuery('.ish-smooth_scroll,' +
		' .ish-ph-mn-main_nav a,' +
		' .ish-sc_icon a[href*="#"],' +
		' .ish-sc_svg_icon a[href*="#"],' +
		' .ish-sc_button[href*="#"],' +
		' .widget_nav_menu a,' +
		' .ish-sc_menu a,' +
		' .ish-top_nav a[href*="#"]').smoothScrollAnchorLink();

}

jQuery.fn.smoothScrollAnchorLink = function() {
	var who = this;

	if ( who.length != 0 ) {
		var scrollDel = 500;
		var inScroll = false;

		who.click( function() {

			if ( jQuery(this).attr("href").indexOf('#') >= 0 ) {

				var current_url = window.location.href.split("#");
				var where_id = jQuery(this).attr("href").split("#");

				// Only scroll if the current URL is the same as the one of the link
				if ( ( current_url[0] == where_id[0] ) || ( '' == where_id[0] ) ) {

					// Set the ID
					where_id = '#' + where_id[1];

					if (( jQuery(where_id).length > 0 ) || ( '#top' == where_id )) {
						// Check if element with the given ID even Exists

						if (!inScroll) {
							var where;

							if (jQuery(this).attr("href") == '#top')
								where = 0;
							else {
								where = where_id;
							}

							var sticky_nav = jQuery('.ish-sticky-scrolling');
							var offset = 0;

							var wpadminbar = jQuery('#wpadminbar');

							if (wpadminbar.length > 0) {
								offset = offset + ( -1 * wpadminbar.outerHeight() );
							}

							if ( jQuery(where).hasClass('ish-row-full-height') ) {
								offset = offset + 50;
							}

							// Check if tab with the given ID exists and open it
							var selected_tab = jQuery('.ish-tabs-navigation li a[href^="' + where + '"]');
							if ( selected_tab.length > 0 ) {
								selected_tab.click();
							}

							// Check if tgg/acc with the given ID exists and open it
							var selected_tgg_acc = jQuery( where );
							if ( selected_tgg_acc.length > 0 ) {
								selected_tgg_acc.find( '.ish-tgg-acc-title' ).click();
							}

							jQuery(window).scrollTo(where, {
								duration: scrollDel,
								offset: offset,
								easing: 'easeInOutQuart',
								axis: 'y',
								onAfter: function () {
									inScroll = false;

									var sticky_nav = jQuery('.ish-sticky-scrolling');
									var offset = 0;

									var wpadminbar = jQuery('#wpadminbar');

									if (wpadminbar.length > 0) {
										offset = offset + ( -1 * wpadminbar.outerHeight() );
									}

									if (!jQuery(where).hasClass('ish-row-full-height')) {
										if (sticky_nav.length > 0) {
											// offset = offset + ( -1 * sticky_nav.outerHeight() );
											offset = offset + ( -1 * sticky_nav.children('.ish-row').outerHeight() ); // .children('.ish-row') because of the gradient "shadow" effect
										}
									}

									jQuery(window).scrollTo(where, {
										duration: scrollDel * 0.75,
										offset: offset,
										axis: 'y',
										onAfter: function () {
											inScroll = false;
										}
									});
								}
							});

							inScroll = true;
						}

						var resp_nav = jQuery('.ish-ph-mn-be_resp.ish-opened');
						var del = 150; // If you change this, please change also the value on the line with comment "RESP_NAV_CLOSE_DURATION"

						if (resp_nav.length > 0) {
							resp_nav
								.css('overflow-y', 'hidden')
								.fadeOut(del, function () {
									jQuery('body').css({'overflow-y': 'auto'});
									resp_nav.removeClass('ish-opened');
								});

							floated_areas_opened = false;
						}

						return false;

					}
				}
			}
		});

	}
};

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

var ish = {}

// Smooth scroll -------------------------------------------------------------------------------------------------------

ish.activate_smooth_scroll = function (){

jQuery('.ish-smooth_scroll,' +

' .ish-ph-mn-main_nav a,' +

' .ish-sc_icon a[href*="#"],' +

' .ish-sc_svg_icon a[href*="#"],' +

' .ish-sc_button[href*="#"],' +

' .widget_nav_menu a,' +

' .ish-sc_menu a,' +

' .ish-top_nav a[href*="#"]').smoothScrollAnchorLink();

}

jQuery.fn.smoothScrollAnchorLink = function() {

var who = this;

if ( who.length != 0 ) {

var scrollDel = 500;

var inScroll = false;

who.click( function() {

if ( jQuery(this).attr("href").indexOf('#') >= 0 ) {

var current_url = window.location.href.split("#");

var where_id = jQuery(this).attr("href").split("#");

// Only scroll if the current URL is the same as the one of the link

if ( ( current_url[0] == where_id[0] ) || ( '' == where_id[0] ) ) {

// Set the ID

where_id = '#' + where_id[1];

if (( jQuery(where_id).length > 0 ) || ( '#top' == where_id )) {

// Check if element with the given ID even Exists

if (!inScroll) {

var where;

if (jQuery(this).attr("href") == '#top')

where = 0;

else {

where = where_id;

}

var sticky_nav = jQuery('.ish-sticky-scrolling');

var offset = 0;

var wpadminbar = jQuery('#wpadminbar');

if (wpadminbar.length > 0) {

offset = offset + ( -1 * wpadminbar.outerHeight() );

}

if ( jQuery(where).hasClass('ish-row-full-height') ) {

offset = offset + 50;

}

// Check if tab with the given ID exists and open it

var selected_tab = jQuery('.ish-tabs-navigation li a[href^="' + where + '"]');

if ( selected_tab.length > 0 ) {

selected_tab.click();

}

// Check if tgg/acc with the given ID exists and open it

var selected_tgg_acc = jQuery( where );

if ( selected_tgg_acc.length > 0 ) {

selected_tgg_acc.find( '.ish-tgg-acc-title' ).click();

}

jQuery(window).scrollTo(where, {

duration: scrollDel,

offset: offset,

easing: 'easeInOutQuart',

axis: 'y',

onAfter: function () {

inScroll = false;

var sticky_nav = jQuery('.ish-sticky-scrolling');

var offset = 0;

var wpadminbar = jQuery('#wpadminbar');

if (wpadminbar.length > 0) {

offset = offset + ( -1 * wpadminbar.outerHeight() );

}

if (!jQuery(where).hasClass('ish-row-full-height')) {

if (sticky_nav.length > 0) {

// offset = offset + ( -1 * sticky_nav.outerHeight() );

offset = offset + ( -1 * sticky_nav.children('.ish-row').outerHeight() ); // .children('.ish-row') because of the gradient "shadow" effect

}

jQuery(window).scrollTo(where, {

duration: scrollDel * 0.75,

offset: offset,

axis: 'y',

onAfter: function () {

inScroll = false;

}

});

}

});

inScroll = true;

}

var resp_nav = jQuery('.ish-ph-mn-be_resp.ish-opened');

var del = 150; // If you change this, please change also the value on the line with comment "RESP_NAV_CLOSE_DURATION"

if (resp_nav.length > 0) {

resp_nav

.css('overflow-y', 'hidden')

.fadeOut(del, function () {

jQuery('body').css({'overflow-y': 'auto'});

resp_nav.removeClass('ish-opened');

});

floated_areas_opened = false;

}

return false;

}

});

}

};

All of this code was taken from parent theme and we added only this part:

// Check if tgg/acc with the given ID exists and open it
var selected_tgg_acc = jQuery( where );
if ( selected_tgg_acc.length > 0 ) {
	selected_tgg_acc.find( '.ish-tgg-acc-title' ).click();
}

// Check if tgg/acc with the given ID exists and open it

var selected_tgg_acc = jQuery( where );

if ( selected_tgg_acc.length > 0 ) {

selected_tgg_acc.find( '.ish-tgg-acc-title' ).click();

}

Now you have to add this part of code into functions.php of your child theme:

function my_custom_scripts() {
	wp_register_script( "my-custom-js", get_stylesheet_directory_uri() . "/assets/js/my-custom.js");
	wp_enqueue_script( "my-custom-js" );
}
add_action( "wp_enqueue_scripts", "my_custom_scripts");

function my_custom_scripts() {

wp_register_script( "my-custom-js", get_stylesheet_directory_uri() . "/assets/js/my-custom.js");

wp_enqueue_script( "my-custom-js" );

}

add_action( "wp_enqueue_scripts", "my_custom_scripts");

If this function already exist, add only these two lines:

wp_register_script( "my-custom-js", get_stylesheet_directory_uri() . "/assets/js/my-custom.js");
wp_enqueue_script( "my-custom-js" );

1 2	wp_register_script( "my-custom-js", get_stylesheet_directory_uri() . "/assets/js/my-custom.js"); wp_enqueue_script( "my-custom-js" );

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Toggle a accordion section through a menulink (url)

Bram — Sat, 07 Oct 2017 11:25:28 +0000

Okay,
I did what you describe but unfortunately it does not work.

I followed the steps on my test account: demo.conceptlijn.nl/tuinierstudent

Would you like to look into the admin? I have already created an IshYoBoy account. (-;

Thanks in advance!

Reply To: Toggle a accordion section through a menulink (url)

IshYoBoy — Mon, 09 Oct 2017 07:06:44 +0000

Hey Bram,

we have checked it and we see, that your file my-custom.js is broken.
Everywhere are backslash chars \.
Please fix it and also please check, if you don’t have any JavaScript errors on the page.

Let us know if it helped.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market