Last active
October 25, 2021 21:21
-
-
Save mohsinrasool/868b2d545db62a66ad9eb6d0031d627c to your computer and use it in GitHub Desktop.
Convert Divi Tabs to Dropdown for Mobile
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** 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(); | |
| }); | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * 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