Append/Remove Div in Tabs Menu Based on Active Tab

Design help Custom code
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.

17%20PM
17%20PM925×824 57.9 KB

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.

1 Like
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>
1 Like
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.