Skip to content

Instantly share code, notes, and snippets.

@mohsinrasool

mohsinrasool/script.js

Last active October 25, 2021 21:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mohsinrasool/868b2d545db62a66ad9eb6d0031d627c to your computer and use it in GitHub Desktop.
Save mohsinrasool/868b2d545db62a66ad9eb6d0031d627c to your computer and use it in GitHub Desktop.
Download ZIP
Convert Divi Tabs to Dropdown for Mobile
Raw
script.js
/** Step 1: Add "mobile-tab-dropdown" to Tab module
* Step 2: Add following script in Divi > Theme Options > Integration > "Add code to <body> tag"
*/
jQuery(document).ready(function () {
if($('.mobile-tab-dropdown').length) {
var html = '<div id="tabs-mobile-dropdown" class="dropdown" style="position: relative;width: 100%;margin: 10px 0;">'
html += '<select class="select-style " style="background: white;width: 100%;">';
$('.et_pb_tabs .et_pb_tabs_controls li').each(function() {
html += '<option value="' + this.className.replace('et_pb_tab_active','') + '">' + $(this).text() + '</option>';
});
html += '</select></div>';
$('.mobile-tab-dropdown').prepend(html)
}
$('#tabs-mobile-dropdown select').on('change',function() {
$('.' + $('#tabs-mobile-dropdown select').val()).click();
});
})
Raw
style.css
/*
* Step 3: Add following style in Divi > Theme Options > General > Custom CSS
*/
#tabs-mobile-dropdown {
display:none;
}
@media screen and (max-width: 768px) {
.mobile-tab-dropdown .et_pb_tabs_controls {
display: none!important;
}
#tabs-mobile-dropdown {
display:block;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment