[et_pb_section bb_built=”1″ _builder_version=”3.12.1″ custom_padding=”0||||false|false”][et_pb_row _builder_version=”3.12.1″][et_pb_column type=”4_4″][et_pb_text _builder_version=”3.12.1″] Michael Caleigh asks:
Has anyone ever created tabs where the content reveals when hovering over the title? I need three different tabs that reveal the content not on click but on hover.
Here’s an example of how we can use a Divi Code module to add some custom JavaScript to the page to implement the hover action on the Divi Tabs module. First, the tabs: [/et_pb_text][et_pb_tabs _builder_version=”3.12.1″][et_pb_tab title=”First Tab” _builder_version=”3.12.1″]This is the content of the first tab. [/et_pb_tab][et_pb_tab title=”Second Tab” _builder_version=”3.12.1″]This is the content of the second tab. [/et_pb_tab][et_pb_tab title=”Third Tab” _builder_version=”3.12.1″]This is the content of the third tab. [/et_pb_tab][/et_pb_tabs][et_pb_tabs _builder_version=”3.12.1″][et_pb_tab title=”Tab Title” _builder_version=”3.12.1″]Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.[/et_pb_tab][et_pb_tab title=”Tab Title” _builder_version=”3.12.1″]Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.[/et_pb_tab][/et_pb_tabs][et_pb_code _builder_version=”3.12.1″]<script type=”text/javascript”><!– [et_pb_line_break_holder] –>jQuery(function ($) {<!– [et_pb_line_break_holder] –> $('.et_pb_tabs ul.et_pb_tabs_controls > li').on('mouseenter, mousemove', function (e) {<!– [et_pb_line_break_holder] –> $(this).find('> a').not('.et_pb_tab_active').click();<!– [et_pb_line_break_holder] –> });<!– [et_pb_line_break_holder] –>});<!– [et_pb_line_break_holder] –></script>[/et_pb_code][et_pb_text _builder_version=”3.12.1″ text_font=”||||||||” link_font=”||||||||” ul_font=”||||||||” ol_font=”||||||||” quote_font=”||||||||” header_font=”||||||||” header_2_font=”||||||||” header_3_font=”||||||||” header_4_font=”||||||||” header_5_font=”||||||||” header_6_font=”||||||||”] Next, the Divi Code module which will normally be invisible in your page layout, but I’m including the script here for illustrative purposes:
<script type="text/javascript">
jQuery(function ($) {
$('.et_pb_tabs ul.et_pb_tabs_controls > li').on('mouseenter, mousemove', function (e) {
$(this).find('> a').not('.et_pb_tab_active').click();
});
});
</script>With this, the Divi Tabs will change when the mouse hovers over each tab. Unfortunately there’s an issue with the way the Divi animations are implemented that if you quickly move the mouse between the tabs while the transition animation is running, you can wind up with your mouse over a tab that isn’t going to be the active tab, but as soon as you move the mouse again, it should start the transition to making that tab active. [/et_pb_text][et_pb_tabs _builder_version=”3.12.1″][et_pb_tab title=”Tab Title” _builder_version=”3.12.1″]Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.[/et_pb_tab][et_pb_tab title=”Tab Title” _builder_version=”3.12.1″]Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.[/et_pb_tab][/et_pb_tabs][/et_pb_column][/et_pb_row][/et_pb_section]