Streaming live at 10am (PST)

Append/Remove Div in Tabs Menu Based on Active Tab


#1

Hello,

I’m wanting to have a nested div inside of each tab that is only visible when the tab is active. I know this is feasible, but I’m not jQuery or JavaScript savvy enough to get it done.

I know it must have something to do with appending the desired div to the tab once it is active and removing it when it isn’t.

I know how to addClass() and removeClass() like is being done within the tabs widget, but I’m not sure how to add/takeaway this div.

The idea is that I’m using the div as a blue glow behind the image I have in each tab. I would like for the glow to be behind the active tabs image. See the screenshot below.

There’s nothing in the actual tab panes yet and the tab images are just recycled, but you should get the idea. I would really appreciate your help! Thanks in advance.

LIVE SITE
SHARE LINK


#2

Not working on published site. Make it appear first.

FYI empty divs do not have any width or height.


#3

I don’t know why it isn’t appearing. Seems like a glitch. You can remove it and re-add it, then it shows up the first time in preview mode. Then you enter preview mode again and it is gone. More or less I just need help with the code though.

Actually it looks good now. For whatever reason, I had to double it’s size to make it show up live how it does in the editor. You will notice the difference when you look @samliew


#4

Here you go

<script>
$('.w-tab-link').click(function() {
  $('.haze-container').appendTo($(this));
});
</script>

#5

Thank you so much @samliew! I will give this a shot and see how it goes. I really appreciate you taking the time to help.