klashxx · April 26, 2017 20:18 · klashxx · Jun 2, 2017
diff --git a/html_css_horizontal_traffic_light.html b/html_css_horizontal_traffic_light.html
 <!DOCTYPE html>
 <html>

 <head>
  <title>CSS Horizontal Traffic Light</title>
  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
 </head>

 <body>

 <style media="screen" type="text/css">
 body {
    background-color: #666;
    margin: 10px;
 }

 /*! Light */
 #traffic-light {
    background-color: #000;
    box-shadow: 0 0 5px rgba(0,0,0, .8);
    overflow: hidden;
    padding: 0 2px 0 5px;
    width: 100px;
 }

 #traffic-light span {
    border-radius: 50px;
    display: inline-block;
    height: 30px;
    margin: 4px auto 0;
    opacity: .5;
    width: 30px;
 }

 /*! Light colours */
 #red    { background-color: red; }
 #orange { background-color: orange; }
 #green  { background-color: green; }

 /*! Active states */
 #traffic-light span.active-light    { opacity: 1; }
 #traffic-light #red.active-light    { box-shadow: 0 0 10px red; }
 #traffic-light #orange.active-light { box-shadow: 0 0 10px orange; }
 #traffic-light #green.active-light  { box-shadow: 0 0 10px green; }

 /*! Toggle button */
 button {
    margin-top: 10px;
 }
 </style>

 <div id="traffic-light">
    <span class="active-light" id="red"></span>
    <span id="orange"></span>
    <span id="green"></span>
 </div>

 <button>Switch Light</button>

 <script>
 $('button').on('click', function() {
    // Caching
    var self = $('.active-light');

    // Check if another element exists after the currently active one otherwise
    // find the parent and start again
    if (self.next().length) {
        self
            .removeClass('active-light')
            .next()
            .addClass('active-light');
    } else {
        self
            .removeClass('active-light')
            .parent()
            .find('span:first')
            .addClass('active-light');
    }
 });
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>CSS Horizontal Traffic Light</title>
	<script
	src="https://code.jquery.com/jquery-3.2.1.min.js"
	integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
	crossorigin="anonymous"></script>
	</head>

	<body>

	<style media="screen" type="text/css">
	body {
	background-color: #666;
	margin: 10px;
	}

	/! Light /
	#traffic-light {
	background-color: #000;
	box-shadow: 0 0 5px rgba(0,0,0, .8);
	overflow: hidden;
	padding: 0 2px 0 5px;
	width: 100px;
	}

	#traffic-light span {
	border-radius: 50px;
	display: inline-block;
	height: 30px;
	margin: 4px auto 0;
	opacity: .5;
	width: 30px;
	}

	/! Light colours /
	#red { background-color: red; }
	#orange { background-color: orange; }
	#green { background-color: green; }

	/! Active states /
	#traffic-light span.active-light { opacity: 1; }
	#traffic-light #red.active-light { box-shadow: 0 0 10px red; }
	#traffic-light #orange.active-light { box-shadow: 0 0 10px orange; }
	#traffic-light #green.active-light { box-shadow: 0 0 10px green; }

	/! Toggle button /
	button {
	margin-top: 10px;
	}
	</style>

	<div id="traffic-light">
	<span class="active-light" id="red"></span>
	<span id="orange"></span>
	<span id="green"></span>
	</div>

	<button>Switch Light</button>

	<script>
	$('button').on('click', function() {
	// Caching
	var self = $('.active-light');

	// Check if another element exists after the currently active one otherwise
	// find the parent and start again
	if (self.next().length) {
	self
	.removeClass('active-light')
	.next()
	.addClass('active-light');
	} else {
	self
	.removeClass('active-light')
	.parent()
	.find('span:first')
	.addClass('active-light');
	}
	});
	</script>
	</body>
	</html>