Is it possible to to let the reader make a tab table retract when he is done reading it. I want them to be able to take this detail away when they want by reclicking the tab button (if that is possible). I didn’t see this feature in the tab video tutorial. Here is my project link.
Yes, this page teaches you how to expand a block, so do it reversed http://interactions.webflow.com/
Vincent - in this case I used the tab feature - not expand a block. I actually started with several tabs but changed my mind and eliminated all but one of the tabs. Your tab tutorial teaches you how to make the tabs themselves look great and dance but NOT how to change the way the content of the tab appears or disappears. Here is the project link I’d like the viewer to make the tab content go away if he doesn’t feel like reading it at that moment. Can you give me a hint or two?
I’m not sure where the element you’re talking about is but the answer is still yes.
To make any element retractable, place a button or icon in the corner of said element, and add an interaction to it. The interaction will be set OnClick, then Affect another element with targetting the element you want to hide. Then set the interaction to Height 0px with an Ease of min 300ms. This will make the element you want to hide retract.
I’m sorry I wasn’t explaining this correctly.
At the bottom of my home page there is a TAB called “Case Studies”. When you click on that TAB the TABPANE appears, specifically “tabpane [tab3]”. I would like this “tabpane” to go away when the reader again clicks the “Case Studies” TAB after reading the case studies.
Is this possible? [project link][1]
You made reference to an “element”. I am sorry but I have know idea what an element is. Thank you for your patients with me.
[1]: https://webflow.com/design/contineo28503138502599171031?preview=e976c5020b0a23692d07ea7b54b2683b
An element is anything: div, text, tab, widget…
So yes you can. Follow quite exactly what I’ve been saying:
To make any element (here your TABPANE TAB3 retractable, place a button or icon in the corner of said element, and add an interaction to it. The interaction will be set OnClick, then Affect another element with targeting the element you want to hide. Then set the interaction to display:none. This will make the element you want to hide go away, back to its display:none status.
Ok - Thank you.
So the answer is, it is NOT possible to do what I ideally wanted - for the viewer to click the existing “Case Studies” tab a second time to make the tabpane go away.
BUT, I can give the viewer the option to hide the tabpane by inserting a new button (ex. “Hide Screen”) into the tabpane for the viewer to click.
Thanks Vincent.
Ok - that’s odd!
Did you notice Vincent that don’t have an “Interactions” option. I clicked on the “tabpan [3]” window. Went to Setting in upper right corner and the only options presented are:
Tab Settings
Custom Attributes
There is no “Interactions” option.
I placed a button inside the “tabpane [3]”, gave it a class “hidebutton”, then after designing the button I clicked on the button, went to Settings and the only options presented are:
Link Setting
Tab Settings
Custom Attributes
Once again no “Interactions” option.
Where is the “Interactions” ???
Mike
The interactions options are under the symbols tab (far right). You can use tabs to open and close your content. Give the content area a class name. Select the tab label that displays the content area and give it an interaction. Click the box that says affect different elements. Type in the class name you gave the content area. The interaction should be a click. On first click display block and on the second click display none.
Thank you David for your guidance.
You know I am pretty good at following instruction and pretty patient about trail and error and searching around for an answer before I ring for help. Why would the tutorial for Interactions say to find it in the Settings tab!!! See below:
Now back to my challenge.
David, it is not giving me the option to “click the box that says affect a different element” whether I click on the tabpane or the tab itself. What the heck am I doing wrong! Ugh!
Hi @UrMarkGetSetGo, thanks for your contacting us on the support channel, per our conversation, you can achieve your behavior in this case with jQuery by using the slidetoggle method, by giving your tab link a unique ID and your Tab pane a unique id and then adding a little jQuery to toggle the tab pane when the tab link is clicked.
Once you define your ID’s for tab link and tab pane, in my example I used tab-link-3 and tab-pane-3. Here is the jQuery code to paste to your Before Body section in Custom Code panel of site settings:
<script>
$( document ).ready(function() {
$( "#tab-link-3" ).click(function() {
$( "#tab-pane-3" ).slideToggle( "slow", function() {
});
});
});
</script>
Try that and see if it helps 
Thanks Dave. That is an awesome fix. Though when the page first loads the jQuery code to close the tab pane on a click is competing with the tab command to open on a click so there is a slight stall and you have to double click the tab button for the tab pane to first open. I’m sure there is a solution for this too. Any ideas?