Webflow's Tabs component supports a "No tab" default state, however once a tab is clicked, you cannot return to that "No tab" state- even using custom code.
However, you can achieve this same effect with a "hidden" tab, which is set as the default, and which can be re-selected later using custom code.
How it works
- You create a hidden tab, optionally with content
- You can set it as the default, or any other
- A "close" button or trigger executes javascript that "clicks" the hidden tab
Code
The code is very simply, here is a jQuery version which you would place in the before /body section.
<script>
// Close button clicked
$(".tab_close-button").click(function() {
$("#hiddenTab").click();
});
</script>
Resources
- Demo - https://webflow-tabs-hacks.webflow.io/
- Cloneable - https://webflow.com/made-in-webflow/website/webflow-tabs-hacks
