Here is an example of how Elementor tab works. When you click on a tab, the content section appears. I want to be able to close the content section by clicking on any other part of the page, except for the tabs and tab content themselves. This should not affect the functionality of the tabs - if I click on a tab again, it should show its content as usual.
When a tab is clicked, a class "tab-current" is added to change the background color of the tab. The active content is displayed with a class "content-current".
jQuery(document).ready(function() {
jQuery(document).click(function(event) {
if (!jQuery(event.target).closest('.premium-tabs-nav-list-item').length) {
jQuery('.premium-tabs-nav-list-item').removeClass('tab-current');
}
if (!jQuery(event.target).closest('.premium-tabs-content-section').length) {
jQuery('.premium-tabs-content-section').removeClass('content-current');
}
});
});<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="tabs">
<div class="premium-tabs-nav-list-item">Tab 1</div>
<div class="premium-tabs-nav-list-item">Tab 2</div>
<div class="premium-tabs-nav-list-item">Tab 3</div>
</div>
<div class="content">
<div class="premium-tabs-content-section">Content 1</div>
<div class="premium-tabs-content-section">Content 2</div>
<div class="premium-tabs-content-section">Content 3</div>
</div>