Create a tab system in CSS and Javascript

Question

I am working on a tab system:

<script> $(function () { var links = $('.sidebar-links > div'); links.on('click', function () { links.removeClass('selected'); $(this).addClass('selected'); }); }); function openCity(evt, cityName) { // Declare all variables var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Get all elements with class="tablinks" and remove the class "active" tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tabcontent.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } // Show the current tab, and add an "active" class to the link that opened the tab document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } </script> 

 /* The main content */ .main-content { font-family: Arial, Helvetica, sans-serif; max-width: 600px; padding-top: 40px; margin: 0 0 40px 260px; } .tabcontent { display: none; } /* The left-collapsing sidebar */ .sidebar-left-collapse { font-family: Arial, Helvetica, sans-serif; position: fixed; top: 0; left: 0; background-color: #292c2f; width: 180px; height: 100%; padding: 20px 0; } .sidebar-left-collapse > a { display: block; text-decoration: none; font-family: Cookie, cursive; width: 122px; height: 122px; margin: 0 auto; text-align: center; color: #ffffff; font-size: 44px; font-weight: normal; line-height: 2.6; border-radius: 50%; background-color: #181a1b; } .sidebar-left-collapse .sidebar-links { margin: 30px auto; } .sidebar-links div > a { display: block; text-decoration: none; margin: 0 auto 5px auto; padding: 10px 0 10px 5px; background-color: #35393e; text-align: left; color: #b3bcc5; font-size: 12px; font-weight: bold; line-height: 2; border-left-width: 2px; border-left-style: solid; } .sidebar-links div.selected > a{ background-color: #ffffff; color: #565d63; line-height: 2.3; margin: 0; } .sidebar-links div > a i.fa { position: relative; font-size: 20px; top: 3px; width: 40px; text-align: center; } .sidebar-links div ul.sub-links { max-height: 0; overflow: hidden; list-style: none; padding: 0 0 0 30px; color: #b3bcc5; font-size: 12px; font-weight: bold; line-height: 24px; margin: 0; transition: 0.4s; } .sidebar-links div.selected ul.sub-links { max-height: 150px; padding: 12px 0 12px 30px; } .sidebar-links div .sub-links a { text-decoration: none; color: #b3bcc5; display: block; text-align: left; } /* Link Colors */ .sidebar-links div.link-blue > a { border-color: #487db2; } .sidebar-links div.link-blue > a i.fa { color: #487db2; } .sidebar-links div.link-red > a { border-color: #da4545; } .sidebar-links div.link-red > a i.fa { color: #da4545; } .sidebar-links div.link-yellow > a { border-color: #d0d237; } .sidebar-links div.link-yellow > a i.fa { color: #d0d237; } .sidebar-links div.link-green > a { border-color: #86be2e; } .sidebar-links div.link-green > a i.fa { color: #86be2e; } /* Making the sidebar responsive */ @media (max-width: 900px) { .main-content{ max-width: none; padding: 70px 20px; margin: 0 0 40px; } .sidebar-left-collapse { width: auto; height: auto; position: static; padding: 20px 0 0; } .sidebar-left-collapse .sidebar-links { text-align: center; margin: 20px auto 0; } .sidebar-links div { display: inline-block; width: 100px; } .sidebar-links div > a { text-align: center; margin: 0; padding: 10px 0; border-left: none; border-top-width: 2px; border-top-style: solid; } .sidebar-links div > a i.fa { display: block; margin: 0 auto 5px; } .sidebar-links div ul.sub-links { display: none; } .sidebar-links div.selected .sub-links { display: block; position: absolute; text-align: center; width: auto; left: 0; right: 0; } .sidebar-links div.selected .sub-links li { display: inline-block; } .sidebar-links div.selected .sub-links a { display: inline-block; margin-right: 20px; font-size: 13px; color: #748290; } } /* Smartphone version */ @media (max-width: 450px) { .main-content{ padding: 90px 20px; } .sidebar-left-collapse { padding: 20px 0; } .sidebar-left-collapse .sidebar-links { text-align: center; margin: 20px auto 0; position: relative; } .sidebar-links div { display: block; width: 240px; margin: 0 auto 5px; } .sidebar-links div > a { text-align: left; padding: 10px 25px; vertical-align: middle; border-top: none; border-left-width: 2px; border-left-style: solid; } .sidebar-links div > a i.fa { display: inline-block; font-size: 20px; width: 20px; margin: 0 20px 0 0; } .sidebar-links div.selected .sub-links { bottom: -90px; } } /* Removing margins and paddings from the body, so that the sidebar takes the full height of the page */ body { margin: 0; padding: 0; } 

 <aside class="sidebar-left-collapse"> <a href="#" class="company-logo">Logo</a> <div class="sidebar-links"> <div class="link-blue selected"> <a href="#"> <i class="fa fa-picture-o"></i>Photography </a> <ul class="sub-links"> <li><a href="#" id="portraits" class="tablinks" onclick="openCity(event, 'portraits')">Portraits</a></li> <li><a href="#" id="landscape" class="tablinks" onclick="openCity(event, 'landscape')">Landscape</a></li> <li><a href="#" id="studioshots" class="tablinks" onclick="openCity(event, 'studioshots')">Studio shots</a></li> <li><a href="#" id="macros" class="tablinks" onclick="openCity(event, 'macros')">Macros</a></li> </ul> </div> </div> </aside> <div class="main-content"> <div id="portraits" class="tabcontent"> Portraits ...</div> <div id="landscape" class="tabcontent"> Landscape ...</div> <div id="studioshots" class="tabcontent"> Studioshots ...</div> <div id="macros" class="tabcontent"> Macros ...</div> </div> 

Also available on JsFiddle

What I'm trying to do is display the contents of each sublanguage available in the sidebar. With the help of what I did when I click on the swap, nothing is displayed. I think the CSS property is display: none; applied to the .tabcontent class .tabcontent not change to display: block;

Please help me figure out what's wrong with my codes.

Answer 1

A simple solution if you are not using ie8 or earlier. As Diego says, you cannot duplicate id values ​​on a page.

 <script> $(function () { var links = $('.sidebar-links > div'); links.on('click', function () { links.removeClass('selected'); $(this).addClass('selected'); }); }); function openCity(evt, cityName) { // Declare all variables var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Get all elements with class="tablinks" and remove the class "active" tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tabcontent.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } // Show the current tab, and add an "active" class to the link that opened the tab document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } </script> 

 /* The main content */ .main-content { font-family: Arial, Helvetica, sans-serif; max-width: 600px; padding-top: 40px; margin: 0 0 40px 260px; } .tabcontent { display: none; } .tabcontent:target { display:block; } /* The left-collapsing sidebar */ .sidebar-left-collapse { font-family: Arial, Helvetica, sans-serif; position: fixed; top: 0; left: 0; background-color: #292c2f; width: 180px; height: 100%; padding: 20px 0; } .sidebar-left-collapse > a { display: block; text-decoration: none; font-family: Cookie, cursive; width: 122px; height: 122px; margin: 0 auto; text-align: center; color: #ffffff; font-size: 44px; font-weight: normal; line-height: 2.6; border-radius: 50%; background-color: #181a1b; } .sidebar-left-collapse .sidebar-links { margin: 30px auto; } .sidebar-links div > a { display: block; text-decoration: none; margin: 0 auto 5px auto; padding: 10px 0 10px 5px; background-color: #35393e; text-align: left; color: #b3bcc5; font-size: 12px; font-weight: bold; line-height: 2; border-left-width: 2px; border-left-style: solid; } .sidebar-links div.selected > a{ background-color: #ffffff; color: #565d63; line-height: 2.3; margin: 0; } .sidebar-links div > a i.fa { position: relative; font-size: 20px; top: 3px; width: 40px; text-align: center; } .sidebar-links div ul.sub-links { max-height: 0; overflow: hidden; list-style: none; padding: 0 0 0 30px; color: #b3bcc5; font-size: 12px; font-weight: bold; line-height: 24px; margin: 0; transition: 0.4s; } .sidebar-links div.selected ul.sub-links { max-height: 150px; padding: 12px 0 12px 30px; } .sidebar-links div .sub-links a { text-decoration: none; color: #b3bcc5; display: block; text-align: left; } /* Link Colors */ .sidebar-links div.link-blue > a { border-color: #487db2; } .sidebar-links div.link-blue > a i.fa { color: #487db2; } .sidebar-links div.link-red > a { border-color: #da4545; } .sidebar-links div.link-red > a i.fa { color: #da4545; } .sidebar-links div.link-yellow > a { border-color: #d0d237; } .sidebar-links div.link-yellow > a i.fa { color: #d0d237; } .sidebar-links div.link-green > a { border-color: #86be2e; } .sidebar-links div.link-green > a i.fa { color: #86be2e; } /* Making the sidebar responsive */ @media (max-width: 900px) { .main-content{ max-width: none; padding: 70px 20px; margin: 0 0 40px; } .sidebar-left-collapse { width: auto; height: auto; position: static; padding: 20px 0 0; } .sidebar-left-collapse .sidebar-links { text-align: center; margin: 20px auto 0; } .sidebar-links div { display: inline-block; width: 100px; } .sidebar-links div > a { text-align: center; margin: 0; padding: 10px 0; border-left: none; border-top-width: 2px; border-top-style: solid; } .sidebar-links div > a i.fa { display: block; margin: 0 auto 5px; } .sidebar-links div ul.sub-links { display: none; } .sidebar-links div.selected .sub-links { display: block; position: absolute; text-align: center; width: auto; left: 0; right: 0; } .sidebar-links div.selected .sub-links li { display: inline-block; } .sidebar-links div.selected .sub-links a { display: inline-block; margin-right: 20px; font-size: 13px; color: #748290; } } /* Smartphone version */ @media (max-width: 450px) { .main-content{ padding: 90px 20px; } .sidebar-left-collapse { padding: 20px 0; } .sidebar-left-collapse .sidebar-links { text-align: center; margin: 20px auto 0; position: relative; } .sidebar-links div { display: block; width: 240px; margin: 0 auto 5px; } .sidebar-links div > a { text-align: left; padding: 10px 25px; vertical-align: middle; border-top: none; border-left-width: 2px; border-left-style: solid; } .sidebar-links div > a i.fa { display: inline-block; font-size: 20px; width: 20px; margin: 0 20px 0 0; } .sidebar-links div.selected .sub-links { bottom: -90px; } } /* Removing margins and paddings from the body, so that the sidebar takes the full height of the page */ body { margin: 0; padding: 0; } 

 <aside class="sidebar-left-collapse"> <a href="#" class="company-logo">Logo</a> <div class="sidebar-links"> <div class="link-blue selected"> <a href="#"> <i class="fa fa-picture-o"></i>Photography </a> <ul class="sub-links"> <li><a href="#portraits" class="tablinks">Portraits</a></li> <li><a href="#landscape" class="tablinks">Landscape</a></li> <li><a href="#studioshots" class="tablinks">Studio shots</a></li> <li><a href="#macros" class="tablinks">Macros</a></li> </ul> </div> </div> </aside> <div class="main-content"> <div id="portraits" class="tabcontent"> Portraits ...</div> <div id="landscape" class="tabcontent"> Landscape ...</div> <div id="studioshots" class="tabcontent"> Studioshots ...</div> <div id="macros" class="tabcontent"> Macros ...</div> </div> <script> window.location = "#portraits"; </script> 

Answer 2

So, I slightly changed your logic and behavior:

Now the “root” menu switches the sub-tables by clicking, and the sub-pancakes display their contents and hide the bedding:

 $(function() { $(".root-link").click(function() { $(this).parent().toggleClass("selected"); }); $(".tablinks").click(function() { $(".tabcontent").hide(); var idtab = $(this).data("tab"); $("#" + idtab + "-tab").show(); $(".link-blue").removeClass("selected"); }); }); 

PS: you cannot have the same identifiers for different elements, so I added sufix -tab to the content element identifier.

Fiddle: https://jsfiddle.net/diegopolido/sar6spzb/