Accordion - Open On Hover

Support
#1

I made an Accordion I was able to make the color change on hover, Can I make it open the drop down on hover ?

#2

Hello @rotation,

Thanks for writing in!

It will require some custom development work which falls outside the scope of support we can offer. However, to get some help you can take a look at following resources:

http://www.htmldrive.net/items/show/547/Hover-Accordion-jQuery

Thanks.

#3

I looked at those sites I could not find anything that worked the JS code you pasted , I tried it did not work for me

#4

Hi @rotation,

If you’re using a Classic Accordion element then you can achieve this by adding the following code in the Theme Options > JS:

jQuery(document).ready(function($){	
	$('.x-accordion-heading').on('hover',function(e) {
		if($(this).find('.x-accordion-toggle').hasClass('collapsed')) {
			$(this).find('.x-accordion-toggle').click();
		}
	});
});

If you’re using a V2 Accordion element then you can use this code:

jQuery(document).ready(function($){	
	$('.x-acc-item').on('hover',function(e) {
		if(!$(this).find('.x-acc-header').hasClass('x-active')) {
			$(this).find('.x-acc-header').click();
		}
	});
});

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope this helps!

#5

Sweet That worked - Question - is it possible to make this function so when you hover off it closes instead of staying open?

#6

Hi @rotation,

As @Nabeel mentioned in the previous reply. That would need a custom development. Please contact to a 3rd party developer to help you with this.

Thank you for understanding!

#7

Im sure its a simple code if anyone knows please let me know so I dont have to hire someone for something so small of a job.

thanks

#8

Hi @rotation,

You can replace the previous sets of code with the following:

For Classic element:

jQuery(document).ready(function($){	
	$('.x-accordion-heading').on('hover',function(e) {
		$(this).find('.x-accordion-toggle').click();
	});
});

For V2 element:

jQuery(document).ready(function($){	
	$('.x-acc-item').on('hover',function(e) {
		$(this).find('.x-acc-header').click();
	});
});

Please note that this is not a native functionality of the theme and requires custom coding. The code provided above serves as a guide only and may not work perfectly or as you need so to customize it further, you need to hire a developer.

Take care.

#9

I tried both codes it works on the roll over but not on the roll off.

#10

Hey @rotation,

It may need a different approach then. As mentioned above, the code provided above serves as a guide only and is to help you in getting started so further customization from here would fall in the custom development which is regretfully outside of our support scope.

Thank you for understanding!

#11

I found out how to do this if anyone wants to do this - I added this JS code to my page editor JS section
V2 Element.

$(’.x-acc-item’).on(‘hover’,function(e) {
if(!$(this).find(’.x-acc-header’).hasClass(‘x-active’)) {
$(this).find(’.x-acc-header’).click();
}
});

#12

Hi @rotation,

Thanks fo sharing the code. Have a great day! :slight_smile:

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.