[SalesForce] How to code ‘scoped tabs’ in Lightning Design System

I want to use the 'scoped tabs' component in a demo community on the Napili template. Example of 'scoped tabs' from LDS (Lightning Design System) at https://www.lightningdesignsystem.com/components/tabs/#scoped 

I will be hand-coding the markup. The HTML makes sense. But I see in the description on the web page, it has some 'javascript needs' to move the .slds-active class and toggle the .slds-hide/.slds-show classes.

Does that mean it requires me to write custom javascript? 

enter image description here

Best Answer

Per the documentation

JAVASCRIPT NEEDS

The active tab has two markup requirements:

  • The .slds-active class should be placed on the li with .tabs--{variant}__item.
  • The corresponding .tabs--{variant}__content container receives .slds-show.

Inactive .tabs--{variant}__content containers receive .slds-hide. When the user clicks a different tab, move the .slds-active class and toggle the .slds-hide/.slds-show classes.

So you will need to write JS that handles placing the slds-active classes and the slds-show/slds-hide classes when a user clicks a tab.