This question has already been answered:
Hello.
How to make all TABs in cbpFWTabs.js inactive so that the user can see the unfolding content just by pressing the tab.
Code example https://codepen.io/donysukardi/pen/KwgXVr
<svg class="hidden"> <defs> <path id="tabshape" d="M80,60C34,53.5,64.417,0,0,0v60H80z"></path> </defs> </svg> <div class="container"> <!-- Top Navigation --> <div class="codrops-top clearfix"> <a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Tutorials/PagePreloadingEffect/"><span>Previous Demo</span></a> <span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=19559"><span>Back to the Codrops Article</span></a></span> </div> <header class="codrops-header"> <h1>Tab Styles Inspiration <span>A small collection of styles for tabs</span></h1> <p class="support">Your browser does not support <strong>flexbox</strong>! <br>Please view this demo with a <strong>modern browser</strong>.</p> </header> <section> <div class="tabs tabs-style-bar"> <nav> <ul> <li class="tab-current"><a href="#section-bar-1" class="icon icon-home"><span>Home</span></a></li> <li><a href="#section-bar-2" class="icon icon-box"><span>Archive</span></a></li> <li><a href="#section-bar-3" class="icon icon-display"><span>Analytics</span></a></li> <li><a href="#section-bar-4" class="icon icon-upload"><span>Upload</span></a></li> <li><a href="#section-bar-5" class="icon icon-tools"><span>Settings</span></a></li> </ul> </nav> <div class="content-wrap"> <section id="section-bar-1" class="content-current"><p>1</p></section> <section id="section-bar-2"><p>2</p></section> <section id="section-bar-3"><p>3</p></section> <section id="section-bar-4"><p>4</p></section> <section id="section-bar-5"><p>5</p></section> </div><!-- /content --> </div><!-- /tabs --> </section> <section> <div class="tabs tabs-style-iconbox"> <nav> <ul> <li class="tab-current"><a href="#section-iconbox-1" class="icon icon-home"><span>Home</span></a></li> <li><a href="#section-iconbox-2" class="icon icon-gift"><span>Deals</span></a></li> <li><a href="#section-iconbox-3" class="icon icon-upload"><span>Upload</span></a></li> <li><a href="#section-iconbox-4" class="icon icon-coffee"><span>Work</span></a></li> <li><a href="#section-iconbox-5" class="icon icon-config"><span>Settings</span></a></li> </ul> </nav> <div class="content-wrap"> <section id="section-iconbox-1" class="content-current"><p>1</p></section> <section id="section-iconbox-2"><p>2</p></section> <section id="section-iconbox-3"><p>3</p></section> <section id="section-iconbox-4"><p>4</p></section> <section id="section-iconbox-5"><p>5</p></section> </div><!-- /content --> </div><!-- /tabs --> </section> <section> <div class="tabs tabs-style-underline"> <nav> <ul> <li class="tab-current"><a href="#section-underline-1" class="icon icon-home"><span>Home</span></a></li> <li><a href="#section-underline-2" class="icon icon-gift"><span>Deals</span></a></li> <li><a href="#section-underline-3" class="icon icon-upload"><span>Upload</span></a></li> <li><a href="#section-underline-4" class="icon icon-coffee"><span>Work</span></a></li> <li><a href="#section-underline-5" class="icon icon-config"><span>Settings</span></a></li> </ul> </nav> <div class="content-wrap"> <section id="section-underline-1" class="content-current"><p>1</p></section> <section id="section-underline-2"><p>2</p></section> <section id="section-underline-3"><p>3</p></section> <section id="section-underline-4"><p>4</p></section> <section id="section-underline-5"><p>5</p></section> </div><!-- /content --> </div><!-- /tabs --> </section> <section> <div class="tabs tabs-style-linetriangle"> <nav> <ul> <li class="tab-current"><a href="#section-linetriangle-1"><span>All Products</span></a></li> <li><a href="#section-linetriangle-2"><span>Electronics</span></a></li> <li><a href="#section-linetriangle-3"><span>Clothing</span></a></li> <li><a href="#section-linetriangle-4"><span>Multimedia</span></a></li> <li><a href="#section-linetriangle-5"><span>Toys</span></a></li> </ul> </nav> <div class="content-wrap"> <section id="section-linetriangle-1" class="content-current"><p>1</p></section> <section id="section-linetriangle-2"><p>2</p></section> <section id="section-linetriangle-3"><p>3</p></section> <section id="section-linetriangle-4"><p>4</p></section> <section id="section-linetriangle-5"><p>5</p></section> </div><!-- /content --> </div><!-- /tabs --> </section> <section> <div class="tabs tabs-style-topline"> <nav> <ul> <li class="tab-current"><a href="#section-topline-1" class="icon icon-home"><span>Home</span></a></li> <li><a href="#section-topline-2" class="icon icon-gift"><span>Deals</span></a></li> <li><a href="#section-topline-3" class="icon icon-upload"><span>Upload</span></a></li> <li><a href="#section-topline-4" class="icon icon-coffee"><span>Work</span></a></li> <li><a href="#section-topline-5" class="icon icon-config"><span>Settings</span></a></li> </ul> </nav> <div class="content-wrap"> <section id="section-topline-1" class="content-current"><p>1</p></section> <section id="section-topline-2"><p>2</p></section> <section id="section-topline-3"><p>3</p></section> <section id="section-topline-4"><p>4</p></section> <section id="section-topline-5"><p>5</p></section> </div><!-- /content --> </div><!-- /tabs --> </section> <section> <div class="tabs tabs-style-iconfall"> <nav> <ul> <li class="tab-current"><a href="#section-iconfall-1" class="icon icon-home"><span>Home</span></a></li> <li><a href="#section-iconfall-2" class="icon icon-gift"><span>Deals</span></a></li> <li><a href="#section-iconfall-3" class="icon icon-upload"><span>Upload</span></a></li> <li><a href="#section-iconfall-4" class="icon icon-coffee"><span>Work</span></a></li> <li><a href="#section-iconfall-5" class="icon icon-config"><span>Settings</span></a></li> </ul> </nav> <div class="content-wrap"> <section id="section-iconfall-1" class="content-current"><p>1</p></section> <section id="section-iconfall-2"><p>2</p></section> <section id="section-iconfall-3"><p>3</p></section> <section id="section-iconfall-4"><p>4</p></section> <section id="section-iconfall-5"><p>5</p></section> </div><!-- /content --> </div><!-- /tabs --> <p>Re-created from <a href="http://vintageproductions.eu/grid/interactivity/">Vintage Productions</a></p> </section> <section> <div class="tabs tabs-style-linemove"> <nav> <ul> <li class="tab-current"><a href="#section-linemove-1" class="icon icon-home"><span>Home</span></a></li> <li><a href="#section-linemove-2" class="icon icon-box"><span>Archive</span></a></li> <li><a href="#section-linemove-3" class="icon icon-display"><span>Analytics</span></a></li> <li><a href="#section-linemove-4" class="icon icon-upload"><span>Upload</span></a></li> <li><a href="#section-linemove-5" class="icon icon-tools"><span>Settings</span></a></li> </ul> </nav> <div class="content-wrap"> <section id="section-linemove-1" class="content-current"><p>1</p></section> <section id="section-linemove-2"><p>2</p></section> <section id="section-linemove-3"><p>3</p></section> <section id="section-linemove-4"><p>4</p></section> <section id="section-linemove-5"><p>5</p></section> </div><!-- /content --> </div><!-- /tabs --> </section> <section> <div class="tabs tabs-style-line"> <nav> <ul> <li class="tab-current"><a href="#section-line-1"><span>Our Controls</span></a></li> <li><a href="#section-line-2"><span>Sony Playstation 4</span></a></li> <li><a href="#section-line-3"><span>Microsoft Xbox One</span></a></li> <li><a href="#section-line-4"><span>Nintendo Wii U</span></a></li> <li><a href="#section-line-5"><span>Microconsoles</span></a></li> </ul> </nav> <div class="content-wrap"> <section id="section-line-1" class="content-current"><p>1</p></section> <section id="section-line-2"><p>2</p></section> <section id="section-line-3"><p>3</p></section> <section id="section-line-4"><p>4</p></section> <section id="section-line-5"><p>5</p></section> </div><!-- /content --> </div><!-- /tabs --> </section> <section> <div class="tabs tabs-style-circle"> <nav> <ul> <li class="tab-current"><a href="#section-circle-1" class="icon icon-plug"><span>Connect</span></a></li> <li><a href="#section-circle-2" class="icon icon-gift"><span>Gifts</span></a></li> <li><a href="#section-circle-3" class="icon icon-box"><span>Boxes</span></a></li> <li><a href="#section-circle-4" class="icon icon-date"><span>Prints</span></a></li> <li><a href="#section-circle-5" class="icon icon-plane"><span>Fun</span></a></li> </ul> </nav> <div class="content-wrap"> <section id="section-circle-1" class="content-current"><p>1</p></section> <section id="section-circle-2"><p>2</p></section> <section id="section-circle-3"><p>3</p></section> <section id="section-circle-4"><p>4</p></section> <section id="section-circle-5"><p>5</p></section> </div><!-- /content --> </div><!-- /tabs --> </section> <section> <div class="tabs tabs-style-shape"> <nav> <ul> <li class="tab-current"> <a href="#section-shape-1"> <svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tabshape"></use></svg> <span>Home</span> </a> </li> <li> <a href="#section-shape-2"> <svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tabshape"></use></svg> <svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tabshape"></use></svg> <span>Design</span> </a> </li> <li> <a href="#section-shape-3"> <svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tabshape"></use></svg> <svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tabshape"></use></svg> <span>Work</span> </a> </li> <li> <a href="#section-shape-4"> <svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tabshape"></use></svg> <svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tabshape"></use></svg> <span>Portfolio</span> </a> </li> <li> <a href="#section-shape-5"> <svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tabshape"></use></svg> <span>Contact</span> </a> </li> </ul> </nav> <div class="content-wrap"> <section id="section-shape-1" class="content-current"><p>1</p></section> <section id="section-shape-2"><p>2</p></section> <section id="section-shape-3"><p>3</p></section> <section id="section-shape-4"><p>4</p></section> <section id="section-shape-5"><p>5</p></section> </div><!-- /content --> </div><!-- /tabs --> </section> <section> <div class="tabs tabs-style-linebox"> <nav> <ul> <li class="tab-current"><a href="#section-linebox-5"><span>Airline</span></a></li> <li><a href="#section-linebox-4"><span>Schedule</span></a></li> <li><a href="#section-linebox-2"><span>Deals</span></a></li> <li><a href="#section-linebox-3"><span>Drinks</span></a></li> <li><a href="#section-linebox-5"><span>Settings</span></a></li> </ul> </nav> <div class="content-wrap"> <section id="section-linebox-1" class="content-current"><p>1</p></section> <section id="section-linebox-2"><p>2</p></section> <section id="section-linebox-3"><p>3</p></section> <section id="section-linebox-4"><p>4</p></section> <section id="section-linebox-5"><p>5</p></section> </div><!-- /content --> </div><!-- /tabs --> </section> <section> <div class="tabs tabs-style-flip"> <nav> <ul> <li class="tab-current"><a href="#section-flip-5" class="icon icon-plane"><span>Airline</span></a></li> <li><a href="#section-flip-4" class="icon icon-date"><span>Schedule</span></a></li> <li><a href="#section-flip-2" class="icon icon-gift"><span>Deals</span></a></li> <li><a href="#section-flip-3" class="icon icon-coffee"><span>Drinks</span></a></li> <li><a href="#section-flip-5" class="icon icon-tools"><span>Settings</span></a></li> </ul> </nav> <div class="content-wrap"> <section id="section-flip-1" class="content-current"><p>1</p></section> <section id="section-flip-2"><p>2</p></section> <section id="section-flip-3"><p>3</p></section> <section id="section-flip-4"><p>4</p></section> <section id="section-flip-5"><p>5</p></section> </div><!-- /content --> </div><!-- /tabs --> </section> <section> <div class="tabs tabs-style-circlefill"> <nav> <ul> <li class="tab-current"><a href="#section-circlefill-1" class="icon icon-plug"><span>Connect</span></a></li> <li><a href="#section-circlefill-2" class="icon icon-gift"><span>Gifts</span></a></li> <li><a href="#section-circlefill-3" class="icon icon-box"><span>Boxes</span></a></li> <li><a href="#section-circlefill-4" class="icon icon-date"><span>Prints</span></a></li> <li><a href="#section-circlefill-5" class="icon icon-plane"><span>Fun</span></a></li> </ul> </nav> <div class="content-wrap"> <section id="section-circlefill-1" class="content-current"><p>1</p></section> <section id="section-circlefill-2"><p>2</p></section> <section id="section-circlefill-3"><p>3</p></section> <section id="section-circlefill-4"><p>4</p></section> <section id="section-circlefill-5"><p>5</p></section> </div><!-- /content --> </div><!-- /tabs --> </section> <section> <div class="tabs tabs-style-tzoid"> <nav> <ul> <li class="tab-current"><a href="#section-tzoid-1" class="icon icon-home"><span>Home</span></a></li> <li><a href="#section-tzoid-2" class="icon icon-box"><span>Archive</span></a></li> <li><a href="#section-tzoid-3" class="icon icon-upload"><span>Upload</span></a></li> <li><a href="#section-tzoid-4" class="icon icon-display"><span>Analytics</span></a></li> <li><a href="#section-tzoid-5" class="icon icon-tools"><span>Settings</span></a></li> </ul> </nav> <div class="content-wrap"> <section id="section-tzoid-1" class="content-current"><p>1</p></section> <section id="section-tzoid-2"><p>2</p></section> <section id="section-tzoid-3"><p>3</p></section> <section id="section-tzoid-4"><p>4</p></section> <section id="section-tzoid-5"><p>5</p></section> </div><!-- /content --> </div><!-- /tabs --> <p>Technique from <a href="http://vintageproductions.eu/grid/interactivity/">Slanted tabs with CSS 3D transforms</a> by Lea Verou</p> </section> <section> <div class="tabs tabs-style-fillup"> <nav> <ul> <li class="tab-current"><a href="#section-fillup-1" class="icon icon-home"><span>Home</span></a></li> <li><a href="#section-fillup-2" class="icon icon-gift"><span>Deals</span></a></li> <li><a href="#section-fillup-3" class="icon icon-upload"><span>Upload</span></a></li> <li><a href="#section-fillup-4" class="icon icon-coffee"><span>Work</span></a></li> <li><a href="#section-fillup-5" class="icon icon-config"><span>Settings</span></a></li> </ul> </nav> <div class="content-wrap"> <section id="section-fillup-1" class="content-current"><p>1</p></section> <section id="section-fillup-2"><p>2</p></section> <section id="section-fillup-3"><p>3</p></section> <section id="section-fillup-4"><p>4</p></section> <section id="section-fillup-5"><p>5</p></section> </div><!-- /content --> </div><!-- /tabs --> </section> <!-- Related demos --> <section class="related"> <p>If you enjoyed this demo you might also like:</p> <a href="http://tympanus.net/Development/ArrowNavigationStyles/"> <img src="img/relatedposts/ArrowNavigationEffects-300x162.png"> <h3>Arrow Navigation Styles</h3> </a> <a href="http://tympanus.net/Development/DotNavigationStyles/"> <img src="img/relatedposts/DotNavigationStyles-300x162.png"> <h3>Dot Navigation Styles</h3> </a> </section> </div><!-- /container --> <script src="js/cbpFWTabs.js"></script> <script> (function() { [].slice.call( document.querySelectorAll( '.tabs' ) ).forEach( function( el ) { new CBPFWTabs( el ); }); })(); </script> 
