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 am trying to do is to display the content of each sublink available in the sidebar. With what I have done, When I click on a sublink, Nothing is displayed. I think the CSS property display: none; applied on the class .tabcontent does not change to display: block;
Kindly help me to figure out, what is wrong with my codes
