We Keep Coding

How to style & toggle notifications list?

I made a nav bar using nav and li tags, including a notifications icon, I am trying to make notifications nested list to show notifications, and use JavaScript to toggle/hide the menu, so far no luck. I've been looking for snippets online to support my logic, but I am stuck in the styling part and the JavaScript functionality. code below:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
html {
scroll-behavior: smooth;
}
* {
font-family: 'Roboto', sans-serif;
font-style: normal;
padding: 0;
margin: 0;
text-decoration: none;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
::-webkit-scrollbar {
width: 1.32vmin;
}
/*
::-webkit-scrollbar-track{
border: 0.53vmin solid rgba(7, 67, 146, 0.17);
box-shadow: inset 0 0 0.33vmin 0.26vmin rgba(7, 67, 146, 0.17);
}
*/
::-webkit-scrollbar-thumb {
background: #074392;
border-radius: 0vmin;
}
::-webkit-scrollbar-button {
height: 7.45vmin;
background: #074392;
}
body {
font-weight: 400;
font-size: 2.12vmin;
background-color: #FFFFFF;
/*overflow: hidden;*/
height: 100%;
}
h1 {
margin-left: 3vmin;
}
h5 {
margin: 2vmin 3vmin;
position: absolute;
width: 14.72vmin;
font-weight: 500;
font-size: 2.65vmin;
letter-spacing: 0.79vmin;
color: #FFFFFF;
display: inline;
}
nav {
background-color: #074392;
height: 7.42vmin;
width: 100%;
/*position: relative;*/
/*overflow: hidden;*/
position: sticky;
top: 0;
}
img.logo {
margin: 1.855vmin 3vmin;
height: 3.5vmin;
width: 7vmin;
}
nav ul {
float: right;
margin: 1.855vmin 2vmin;
}
nav ul li {
display: inline-block;
}
nav ul li::before {
content: " ";
padding: 0vmin 0.5vmin;
}
nav ul li a {
color: white;
/*margin: 0vmin 1vmin;*/
/*border-top-left-radius: 1.326vmin;
border-top-right-radius: 1.326vmin;
border-bottom-left-radius: 1.326vmin;
border-bottom-right-radius: 1.326vmin;*/
}
a.active,
a:hover {
font-variation-settings: 'FILL' 1;
}
.checkbtn {
color: #ffffff;
float: left;
cursor: pointer;
display: none;
margin: 1.855vmin 3vmin;
}
#check {
display: none;
}
#check:checked~ul {
left: 0;
}
.dropdown {}
.dropdown .dropbtn {
cursor: pointer;
border: none;
outline: none;
background-color: #074392;
color: #FFFFFF;
}
.dropdown:hover .dropbtn,
.dropbtn:focus {
color: #FFFFFF;
font-variation-settings: 'FILL' 1;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #0743922B;
width: 37.5vmin;
overflow-wrap: break-word;
transform: translateX(-56%);
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: justify;
}
.dropdown-content a:hover {
background-color: #0743922B;
}
.show {
display: block;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200" />
<div class="container">
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Menu">menu</i>
</label>
<h5>LOGO</h5>
<ul>
<li>
<i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Home">home</i>
</li>
<!-- <li> <i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Notifications">notifications</i> -->
<li class="dropdown"><button class="dropbtn" onclick="myFunction()"><i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Notifications">notifications</i></button>
<div class="dropdown-content" id="myDropdown">
<div>Link 1</div>
<div>Link 2</div>
<div>Link asasdasdasdasdasdsadsadasdasdasdasd asddasdas asd asd asd dasd asd</div>
</div>
</li>
<li>
<i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Tasks">task</i>
</li>
<li>
<i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Profile">person</i>
</li>
</ul>
<script type="text/javascript" src="JS/ActiveTab.js"></script>
<script type="text/javascript" src="JS/ToggleNotifications.js"></script>
</nav>
<main>
<h1>Example Page</h1>
</main>
</div>

By default set a display: none on the dropdown element and set a display: block on the hover pseudo-class of the dropdown element so when a hover event is triggered the dropdown appears.
Also, you can use classList.toggle method to remove if exists or to add if not exist the class.
Remove
Just add the following to the .css:
#myDropdown {
display: none;
}
#myDropdown.show {
display: block;
}
Remove onclick="myFunction()". And replace the .js with:
const myDropdown = document.getElementById('myDropdown')
addEventListener('click', event => {
let dropbtn = event.target.closest('button.dropbtn')
if (!dropbtn) return myDropdown.classList.remove('show')
console.log('hii')
myDropdown.classList.toggle('show')
})

On dropdown click, sidebar needs to get taller

Currently I have a sidebar that has a dropdown feature. When the dropdown gets clicked, I would like the height of my sidebar to increase. In the JavaScript I have a loop that toggles through the buttons so they can show/hide. In CSS I have a defined height of 60% that would ideally go to 80% when the dropdown menu is clicked. In HTML I just have the links for the sidenav.
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
/* Fixed sidenav, full height */
.sidenav {
height: 60%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}
/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
color: #f1f1f1;
}
/* Main content */
.main {
margin-left: 200px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
/* Add an active class to the active dropdown button */
.active {
background-color: green;
color: white;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
/* Optional: Style the caret down icon */
.fa-caret-down {
float: right;
padding-right: 8px;
}
<div class="sidenav">
About
Services
Clients
Contact
<button class="dropdown-btn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
Link 1
Link 2
Link 3
</div>
Search
</div>

Maybe I'm misunderstanding what you're trying to do. But if you just want the height of the sidenav element to go to 80% when the dropdown is open, you could just select the element and set the height using the style property:
var dropdown = document.getElementsByClassName("dropdown-btn");
// Select sidenav element
var sidenav = document.getElementsByClassName("sidenav")[0];
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
// Dropdown closed, sidenav height is 60%
sidenav.style.height = "60%";
} else {
dropdownContent.style.display = "block";
// Dropdown open, sidenav height is 80%
sidenav.style.height = "80%";
}
});
}
/* Fixed sidenav, full height */
.sidenav {
height: 60%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
/* Style the sidenav links and the dropdown button */
.sidenav a,
.dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}
/* On mouse-over */
.sidenav a:hover,
.dropdown-btn:hover {
color: #f1f1f1;
}
/* Main content */
.main {
margin-left: 200px;
/* Same as the width of the sidenav */
font-size: 20px;
/* Increased text to enable scrolling */
padding: 0px 10px;
}
/* Add an active class to the active dropdown button */
.active {
background-color: green;
color: white;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
/* Optional: Style the caret down icon */
.fa-caret-down {
float: right;
padding-right: 8px;
}
<div class="sidenav">
About
Services
Clients
Contact
<button class="dropdown-btn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
Link 1
Link 2
Link 3
</div>
Search
</div>

HTML/CSS - Add a small triangle or arrow to the bottom of an active Tab in my navigation

I need help with something I'm working on: tabs to show different content. It's simple HTML/CSS with some javascript to help with the tab selection. I have created a simple tab system and I'm able to cycle through all the tabs and show different content. And I'm able to style the active tab with a different color and I use Javascript to change the active tab whenever I click on another tab.
Now for my question, I want to display a little arrow below the active tab. Which just points to the content and shows the active tab. I've tried a few things using the ::before and ::after pseudo classes but I can't get the arrow to stick below the tab headings. For example, I want there to be an arrow below the 'ACADEMICS' or below the 'CHALO LIFE' heading or the 'SPOTLIGHT' heading. If anyone is able to help me do this, I will greatly appreciate.
HTML
<div class="indexContainer grayContainer">
<div class="tabDiv">
<nav class="tab">
<ul class="tabMenu">
<li><a class="tablinks activeTab" onclick=" return openTab(event, 'Academics')" >Academics</a></li>
<li><a class="tablinks" onclick="return openTab(event, 'ChaloLife')">Chalo Life</a></li>
<li><a class="tablinks lastChild" onclick="return openTab(event, 'Spotlight')">Spotlight</a></li>
</ul>
</nav>
<div id="Academics" class="tabContent default">
<h3>Academics</h3>
Talk about our academic programs
</div>
<div id="ChaloLife" class="tabContent">
<h3>Chalo Life</h3>
Talk about life at Chalo Trust School
</div>
<div id="Spotlight" class="tabContent">
<h3>Spotlight</h3>
Spotlight on special events or people
</div>
</div>
</div>
CSS
.indexContainer {
width: 100%;
margin: auto;
min-height: 350px;
height: auto;
}
.grayContainer {
background-color: #ededed;
color: black;
}
nav {
margin: 0px;
}
/*Sets the nav bar in a horizontal manner. Hides the items for the
list and ensures there's no scroll bar*/
nav ul {
display: flex;
flex-direction:row;
margin: 0px;
padding: 0px;
list-style-type: none;
overflow: hidden;
}
/*Styles each of the individual items in the nav bar list. Adds color
and changes their font. Adds a border at the end*/
nav ul li {
flex-grow: 1;
font-family: Constantia,"Lucida Bright",Lucidabright,"Lucida
Serif",Lucida,"DejaVu Serif","Bitstream Vera Serif","Liberation
Serif",Georgia,serif;
font-size: 1em;
font-weight: bolder;
padding: 0;
}
/*Determines how the links inside the navbar will be displayed.Gives
them a background color*/
nav ul li a {
display: block;
background: #800000;
height: 30px;
text-align:center;
padding: 7px 10px;
text-transform: uppercase;
-webkit-transition: 0.45s;
transition: 0.45s;
}
nav.tab {
overflow: hidden;
background: #e4e4e6;
display: block;
margin: auto;
}
nav.tab a {
background-color: inherit;
border: none;
outline: none;
cursor: pointer;
display: block;
margin: auto;
height: 30px;
vertical-align: middle;
padding: 20px 16px;
transition: 0.3s;
border-right: #000 solid 1px;
position: relative;
color: #990000;
}
a.tablinks.lastChild{
border: none;
}
a.tablinks:link {
color: #990000;
font-weight:bolder;
font-size: 20px;
text-transform: capitalize;
}
a.tablinks:visited {
color: #990000;
font-size: 20px;
font-weight: 900;
}
a.tablinks:hover {
color: black;
background: white;
}
ul.tabMenu{
border: none;
display: flex;
flex-direction: row;
}
a.tablinks.activeTab {
background-color: #990000;
color: white;
}
.tabContent {
display: none;
padding: 6px 12px;
border-top: none;
}
.default {
display: block;
}
JAVASCRIPT
function openTab(evt, tabName) {
// 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 < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" activeTab", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " activeTab";
return true;
}

Try this:
function openTab(evt, tabName) {
// 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 < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" activeTab", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " activeTab";
return true;
}
.indexContainer {
width: 100%;
margin: auto;
min-height: 350px;
height: auto;
}
.grayContainer {
background-color: #ededed;
color: black;
}
nav {
margin: 0px;
}
/*Sets the nav bar in a horizontal manner. Hides the items for the
list and ensures there's no scroll bar*/
nav ul {
display: flex;
flex-direction:row;
margin: 0px;
padding: 0px;
list-style-type: none;
overflow: hidden;
}
/*Styles each of the individual items in the nav bar list. Adds color
and changes their font. Adds a border at the end*/
nav ul li {
flex-grow: 1;
font-family: Constantia,"Lucida Bright",Lucidabright,"Lucida
Serif",Lucida,"DejaVu Serif","Bitstream Vera Serif","Liberation
Serif",Georgia,serif;
font-size: 1em;
font-weight: bolder;
padding: 0;
}
/*Determines how the links inside the navbar will be displayed.Gives
them a background color*/
nav ul li a {
display: block;
background: #800000;
height: 30px;
text-align:center;
padding: 7px 10px;
text-transform: uppercase;
-webkit-transition: 0.45s;
transition: 0.45s;
/* ADD THIS */
position: relative;
}
/* ADD THIS */
nav ul li a.activeTab::before {
content: '';
position: absolute;
border: 10px solid transparent;
border-top: 0;
border-bottom-color: black;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
/* END ADD */
nav.tab {
overflow: hidden;
background: #e4e4e6;
display: block;
margin: auto;
}
nav.tab a {
background-color: inherit;
border: none;
outline: none;
cursor: pointer;
display: block;
margin: auto;
height: 30px;
vertical-align: middle;
padding: 20px 16px;
transition: 0.3s;
border-right: #000 solid 1px;
position: relative;
color: #990000;
}
a.tablinks.lastChild{
border: none;
}
a.tablinks:link {
color: #990000;
font-weight:bolder;
font-size: 20px;
text-transform: capitalize;
}
a.tablinks:visited {
color: #990000;
font-size: 20px;
font-weight: 900;
}
a.tablinks:hover {
color: black;
background: white;
}
ul.tabMenu{
border: none;
display: flex;
flex-direction: row;
}
a.tablinks.activeTab {
background-color: #990000;
color: white;
}
.tabContent {
display: none;
padding: 6px 12px;
border-top: none;
}
.default {
display: block;
}
<div class="indexContainer grayContainer">
<div class="tabDiv">
<nav class="tab">
<ul class="tabMenu">
<li><a class="tablinks activeTab" onclick=" return openTab(event, 'Academics')" >Academics</a></li>
<li><a class="tablinks" onclick="return openTab(event, 'ChaloLife')">Chalo Life</a></li>
<li><a class="tablinks lastChild" onclick="return openTab(event, 'Spotlight')">Spotlight</a></li>
</ul>
</nav>
<div id="Academics" class="tabContent default">
<h3>Academics</h3>
Talk about our academic programs
</div>
<div id="ChaloLife" class="tabContent">
<h3>Chalo Life</h3>
Talk about life at Chalo Trust School
</div>
<div id="Spotlight" class="tabContent">
<h3>Spotlight</h3>
Spotlight on special events or people
</div>
</div>
</div>

two functions interfering with each other

So my first stab at web development is proceeding reasonably well.
However... I want to have two separate drop down menus, but the JavaScript functions are interfering with each other... That is, if both functions are active at the same time, clicking on one drop down will cause the other drop down to react or stop working. It is probably something massively stupid, but I have little time left. here is the code:
//Control sliding menu on screens smaller than a specified breakpoint.
(function(menu_button, links, breakpoint)
{
"use strict";
var menulink = document.getElementById(menu_button),
menu = document.getElementById(links);
menu.className = "start";
setTimeout(function()
{
menu.className = "collapsed";
}, 20);
menuLink.onclick = function()
{
if (menu.className === "displayed")
{
menu.className = "collapsed";
}
else
{
menu.className = "displayed";
}
return false;
};
window.onresize = function()
{
if (window.innerWidth < breakpoint)
{
menu.className = "collapsed";
}
};
})("menuLink", "navLinks", 700);
That was function No.1, here is No.2:
function dropFunction()
{
"use strict";
document.getElementById("myDropdown").classList.toggle("drop");
}
window.onclick = function(e)
{
"use strict";
if (!e.target.matches('.dropbtn'))
{
var dropdowns = document.getElementsByClassName("dropdownContent");
for (var d = 0; d < dropdowns.length; d++)
{
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains("drop"))
{
openDropdown.classList.remove("drop");
}
}
}
}
and HTML if at all usefull:
<nav>
<p id="menuLink">MENU</p>
<ul class="displayed" id="navLinks">
<li>Home</li>
<li>Portfolio</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
<div class="dropdownContent" id="myDropdown">
<img class="externalLink" src="images/faceBook.png" style="width:20px">
<img class="externalLink" src="images/linkedIn.png" style="width:20px">
<img class="externalLink" src="images/soundCloud.png" style="width:20px">
</div>
and CSS:
.nav
{
display: inline;
position: absolute;
bottom: 220px;
padding-right: 60px;
width: 100%;
background-color: transparent;
font-family: "verdana";
font-size: 20px;
text-align: center;
}
.nav li
{
display: inline;
}
.nav a
{
display: inline-block;
padding: 50px;
text-decoration: none;
color: #E4E4E4;
}
.nav a:hover
{
color: #FFFFFF;
text-shadow: 0px 0px 15px #FFFFFF;
}
.nav a:active
{
color: #5B4CA8;
}
li.drops
{
display: inline-block;
}
.dropdownContent
{
display: none;
position: absolute;
background-color: transparent;
box-shadow: none;
minimum-width: 20px;
}
.dropdownContent a
{
color: transparent;
text-decoration: none;
display: block;
text-align: center;
}
.drop
{
display: block;
}
#menuLink
{
width: 100%;
background-color: transparent;
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}
#menuLink a
{
text-decoration: none;
font-family: "helvetica";
color: #E4E4E4;
}
#menuLink a:hover
{
color: #FFFFFF;
text-shadow: 0px 0px 15px #FFFFFF;
}
#menuLink a:active
{
color: #5B4CA8;
}
#navLinks
{
position: absolute;
list-style-type: none;
width: 100%;
background-color: transparent;
padding: 0;
margin: 0;
text-align: center;
z-index: 1;
opacity: 1;
-webkit-transition: all ease-out 0.5s;
transition: all ease-out 0.5s;
}
#navLinks a
{
display: block;
padding: 10px;
font-family: "helvetica";
color: #E4E4E4;
text-decoration: none;
font-size: 18px;
}
#navLinks a:hover
{
color: #FFFFFF;
text-shadow: 0px 0px 15px #FFFFFF;
}
#navLinks a:active
{
color: #5B4CA8;
}
#navLinks.start
{
display: none;
}
#navLinks.collapsed
{
top: -12em;
opacity: 0;
}
Thanks for your help!

You have used the window.Onlcick event to specify behaviors for the dropdowns if the user is not clicking on something with class "drop". This event will fire if you click on any item in that window because events bubble up like that in JavaScript.

Click function not working in slideshow

I'm making jQuery to click the Next and Previous span tab to control the image slideshow but it's not working.
function slideshow() {
var $active = $('div#slider-wrap img.active-img');
var $next = $active.next();
$next.addClass('active-img');
$active.removeClass('active-img');
}
$(function() {
setInterval(slideshow, 5000);
});
$('#tab-container a').on('click', function() {
var element = this.id;
console.log(element);
$('.images').trigger("slideshow", element);
});
/* next and previous jquery code */
$(document).ready(function() {
var divs = $('.images>img');
var now = 0; // currently shown div
divs.hide().first().show(); // hide all divs except first
$("#previous").click(function() {
divs.eq(now).hide();
now = (now + 1 < divs.length) ? now + 1 : 0;
divs.eq(now).show(); // show next
});
$("#next").click(function() {
divs.eq(now).hide();
now = (now > 0) ? now - 1 : divs.length - 1;
divs.eq(now).show(); // show previous
});
});
* {
margin: 0;
padding: 0;
}
#slider-wrap {
position: relative;
}
.slideshow .images {
width: 100%;
height: 350px;
overflow: hidden;
margin: 0 auto;
}
.slideshow .images img {
position: absolute;
width: 100%;
max-width: 960px;
height: auto;
}
.active-img {
z-index: 99;
}
#tab-container {
border-bottom: #ccc 1px solid;
border-top: #ccc 1px solid;
overflow: hidden;
width: 50%;
margin-top: 265px;
}
#tab-container span {
display: block;
float: left;
width: 42.995%;
padding: 10px 0;
text-align: center;
font-size: 12px;
text-transform: uppercase;
border-right: #ccc 1px solid;
letter-spacing: 1px;
font-family: 'corporate_condensed', sans-serif;
}
#tab-container a:nth-of-type(2) span {
border-right: 0;
}
#tab-container a,
#tab-container a:hover,
#tab-container a:active,
#tab-container a:visited {
text-decoration: none;
font-weight: bold;
color: #000;
cursor: pointer;
}
#tab-container span:hover {
color: #fff;
background: #444;
}
#tab-container span.active {
color: #fff;
background: #444;
}
#tab-container a span.active,
.c-slider #tab-container a:hover span.active,
.c-slider #tab-container a:active span.active,
.c-slider #tab-container a:visited span.active {
color: #fff;
}
#slider_time {
display: none;
}
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<div id="slider-wrap">
<div class="slideshow">
<div class="images">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/1.jpg" alt="" class="active-img">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/2.jpg" alt="">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/3.jpg" alt="">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/4.jpg" alt="">
</div>
</div>
</div>
<div id="tab-container">
<a><span id="previous" class="">Previous</span></a>
<a><span id="next"class="">Next</span></a>
</div>
<div style="clear:both"></div>
Previous and next tabs are not aligning properly with equal width. I'm having this problem all the time.