Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Tab Carousel Content Switch

Recommended Posts

I'm trying to build a tab slider that has three list items, and three associated copy block + icon. Overall...I'm not really sure where to start on this either. Ideally, when you click a different list item, it switches the content and icon to the correlating tab item and makes the List Item 100% opacity. Screenshot reference attached. 


I started getting the Tab "on click" working to switch with add/remove class for opacity, but when I try animating it to fade it just changes both of them.

Thoughts on this?

Screen Shot 2018-03-21 at 8.30.21 PM.png

See the Pen mxmmvq by nmarketti (@nmarketti) on CodePen

Link to comment
Share on other sites



Was able to get the tab click and fade working. But still struggling to link the tab to fade out their correlated content.

Link to comment
Share on other sites

In your example you are trying to get 'content' attribute but I think you are trying to retrieve text of your li tags. You can do that using text method of jQuery. To use it to Tween, you need additional class to your tabs, like contentOne, contentTwo.


See the Pen eMWKPw?editors=0010 by Sahil89 (@Sahil89) on CodePen


Though your example is way too complex, you can simplify it as follows,


See the Pen rdmKKE?editors=0010 by Sahil89 (@Sahil89) on CodePen


  • Like 4
Link to comment
Share on other sites

Ah. This is a great. Thank you. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.