You could decide to use this approach:
- Record when the user selects a tab
- Add a specific class when a tab is clicked. Make sure to remove all other tabs of this
specific class. - When the user clicks on “See more”, we simply fetch the tab that has the specific class
It is demonstrated below:
$(document).ready(function() {
$("a").on('click', function() {
var selected = $("div .selected");
console.log("someurl.com/category/all/" + selected.text());
});
});
function update(element) {
ridOfOtherClass();
$(element).addClass("selected");
}
var buttons = $("div");
function ridOfOtherClass() {
for (var i = 0; i < buttons.length; i++) {
$(buttons[i]).removeClass("selected");
}
}.as-console-wrapper{
max-height:50px !important;
/*Overrides so user is guaranteed space to click the "See more" button. DO NOT USE THIS CSS ON YOUR WEBSITE - IT IS STACK SNIPPET ONLY*/
}
div{
cursor:pointer;
}
a{
cursor:pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" id="wp-block-library-css" href="http://tantara.shop/wp-includes/css/dist/block-library/style.min.css?ver=5.6" type="text/css" media="all">
<div class="elementor-tabs-wrapper">
<div id="elementor-tab-title-1001" class="elementor-tab-title elementor-tab-desktop-title elementor-active elementor-repeater-item-c510f25 selected" data-tab="1" tabindex="1001" role="tab" aria-controls="elementor-tab-content-1001" onclick="update(this)">All</div>
<div id="elementor-tab-title-1002" class="elementor-tab-title elementor-tab-desktop-title elementor-repeater-item-97b56a1" data-tab="2" tabindex="1002" role="tab" aria-controls="elementor-tab-content-1002" onclick="update(this)">Audio Interface</div>
<div id="elementor-tab-title-1003" class="elementor-tab-title elementor-tab-desktop-title elementor-repeater-item-2658a88" data-tab="3" tabindex="1003" role="tab" aria-controls="elementor-tab-content-1003" onclick="update(this)">Monitor Speaker</div>
<div id="elementor-tab-title-1004" class="elementor-tab-title elementor-tab-desktop-title elementor-repeater-item-91a22ba" data-tab="4" tabindex="1004" role="tab" aria-controls="elementor-tab-content-1004" onclick="update(this)">MIC</div>
<div id="elementor-tab-title-1005" class="elementor-tab-title elementor-tab-desktop-title elementor-repeater-item-81bf58f" data-tab="5" tabindex="1005" role="tab" aria-controls="elementor-tab-content-1005" onclick="update(this)">Keyboard</div>
<div id="elementor-tab-title-1006" class="elementor-tab-title elementor-tab-desktop-title elementor-repeater-item-eb73db8" data-tab="6" tabindex="1006" role="tab" aria-controls="elementor-tab-content-1006" onclick="update(this)">Midi controller</div>
<div id="elementor-tab-title-1007" class="elementor-tab-title elementor-tab-desktop-title elementor-repeater-item-1a3ff00" data-tab="7" tabindex="1007" role="tab" aria-controls="elementor-tab-content-1007" onclick="update(this)">Accessory</div>
</div>
<a>See more</a>
<!-- Please understand that I did not understand any of the words in the untranslated version. As Google Translation has demonstrated considerable capabilities in translating properly, I chose to translate with that.-->If you’re not sure what’s supposed to be happening, click on a tab and click “See more.” An example URL will be shown, which can be customized into a GET request etc,.
