Question

181

CSS: Add border with animation left to right | right to left

rated 0 times [ 184] [ 3] / answers: 1 / hits: 7248 / 5 Years ago, thu, february 21, 2019, 12:00:00

I'm currently trying to build a tabbed div container:

At the moment it looks like this. I can also switch the tab. Each tab has an is-active class.

To show the user which tab is active, I've added a border under each tab. When I change tab now, the border get's hardly changed. So removed from the left one and added to the right one.

Because this looks not so pretty I thought Is it possible to add the border with an animation sliding from the left to the right or back to the left when pressing the tab title?

So it should looks like fading from tab to the other one. Any idea how to deal with this?

This is my simplified code:

jQuery(ul.tabs li).click(function(){

  var e = jQuery(this).attr(aria-controls);

  jQuery(this).hasClass(active)||(jQuery(li).removeClass(active),jQuery(this).addClass(active),jQuery(#+e).show())})

ul.tabs {

    margin: 0!important;

    padding: 0!important;

    background: #f4f4f4;

    display: flex;

}



ul.tabs li {

  flex-grow: 50;

  list-style: none;

  text-align: center;

  background: #fff;

  line-height: 45px;

  cursor: pointer;

}



ul.tabs li a {

  color: black;

  text-decoration: none;

}



ul.tabs li.active {

    cursor: default;

    border-bottom: 2px solid red;

}

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>

<ul class=tabs wc-tabs role=tablist>

  <li class=description_tab active id=tab-title-description role=tab aria-controls=tab-description> 

    <a href=#tab-description>Beschreibung</a>

  </li>

  <li class=reviews_tab id=tab-title-reviews role=tab aria-controls=tab-reviews>

    <a href=#tab-reviews>Fragen / Antworten</a>

  </li>

</ul>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

loganl

Add To Favorites

Follow

Total Points: 424

Total Questions: 86

Total Answers: 112

Location: Zimbabwe

Member since Thu, Jul 21, 2022

2 Years ago

loganl questions

1 Is there an easier way to display live time and date in HTML using bootstrap?

Fri, Apr 17, 20, 00:00, 4 Years ago

1 Angular View Component Data Loss during Reload Refresh using BehaviorSubject

Tue, Mar 24, 20, 00:00, 4 Years ago

1 What is the best way to use async/await inside onAuthStateChanged() of Firebase?

Thu, Jun 13, 19, 00:00, 5 Years ago

1 'Symbol' is undefined in IE 11

Sun, Apr 14, 19, 00:00, 5 Years ago

1 React Refs woth setState giving Maximum update depth exceeded.

Fri, Aug 31, 18, 00:00, 6 Years ago

View All

answered 5 Years ago beatriceisabelad · Accepted Answer

Yes,you can do it using an extra tag. Call it as a slider for now.

So, now if you click on the slider will move to and fro.

Here is code attached.

var tabs = document.getElementsByClassName('Tab');



Array.prototype.forEach.call(tabs, function(tab) {

	tab.addEventListener('click', setActiveClass);

});



function setActiveClass(evt) {

	Array.prototype.forEach.call(tabs, function(tab) {

		tab.classList.remove('active');

	});

	

	evt.currentTarget.classList.add('active');

}

.Tabs {

	position: relative;

	background-color: #fff;

	margin: 0;

	padding: 0;

	list-style: none;

}



.Tabs:after {

		content: ' ';

		display: table;

		clear: both;

	}



.description_tab {

		float: left;

		width: 33.333%;

		text-align: center;

	}



.description_tab:first-child.active ~ .slider {

			left: 0;

		}



.description_tab:nth-child(2).active ~ .slider {

			left: 33.333%;

		}



.slider {

		position: absolute;

		bottom: 0;

		left: 0;

		width: 33.333%;

		height: 4px;

		background-color: #4A66F4;

		transition: left .25s;

	}



.Tab {

	font-family: 'Roboto Slab';

}



.Tab > a {

		display: block;

		padding: 10px 12px;

		text-decoration: none;

		color: #666;

		transition: color .15s;

	}



.Tab.active > a {

			color: #222;

		}



.Tab:hover > a {

			color: #222;

		}

<!DOCTYPE html>

<html>

<head>

  <meta charset=utf-8>

  <script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>



  <meta name=viewport content=width=device-width>

  <title>JS Bin</title>

</head>

<body>

  

<ul class=Tabs role=tablist>

  <li class=description_tab active Tab id=tab-title-description role=tab aria-controls=tab-description> 

    <a href=#tab-description>Beschreibung</a>

  </li>

  <li class=description_tab Tab id=tab-title-reviews role=tab aria-controls=tab-reviews>

    <a href=#tab-reviews>Fragen / Antworten</a>

  </li>

<li class=slider role=presentation></li></ul>

</body>

</html>

Hope this helped you,
Thank you.

Credits: from earth on codepen