Canvas Support

Activate tabs by mouseover instead of clicks

1 reply·opened May 5, 2020
S
spyzedMay 5, 2020

Hi,

I am using the Tabs shortcodes:

<div class="tabs clearfix" id="tabs">

	<ul class="tab-nav clearfix">
		<li><a href="#tab-1">Tab 1</a></li>
		<li><a href="#tab-2">Tab 2</a></li>
		<li><a href="#tab-3">Tab 3</a></li>
	</ul>

	<div class="tab-container">

		<div class="tab-content clearfix" id="tab-1">
			This is Tab 1 Content
		</div>
		<div class="tab-content clearfix" id="tab-2">
			This is Tab 2 Content
		</div>
		<div class="tab-content clearfix" id="tab-3">
			This is Tab 3 Content
		</div>

	</div>

</div>

Can I know if it is possible for me to trigger the tabs by mouseover instead of clicks? If yes, please advise how to do that. Thank you in advance!

S
SemiColonWebSTAFFMay 6, 2020

Hello,

This is Definitely Possible. Simply add the following code at the bottom of the Page just after the js/functions.js JS File linking:

<script>
&#x9;jQuery(window).on( &apos;load&apos;, function(){
&#x9;&#x9;$( &apos;#tab-1&apos; ).tabs( &apos;option&apos;, &apos;event&apos;, &apos;mouseover&apos; );
&#x9;});
</script>

This will definitely work fine. Simply change the #tab-1 in above code with your Tab's ID/Class Hope this Helps!

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

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