clhenrick/index.html

## index.html
<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Loop over DOM elements</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

        <style type="text/css">
            div {
                width: 200px;
                height: 100px;
                border: 1px solid black;
                margin: 30px auto;
            }

            div p {
                position: relative;
                text-align: center;
                font-weight: 600;
                letter-spacing: 3px;
                top: 25px;
            }

            button {
                display: block;
                margin: 50px auto 10px auto;
                width: 75px;
            }

            .inactive {
                display: none;
                background-color: hsla(0, 0%, 0%, 0.2);
            }

            .active {
                background-color: hsla(0, 50%, 80%, 0.6);
            }

        </style>
    </head>
    <body>

    <div id="div1" class="active"><p>Hey</p></div>
    <div id="div2" class="inactive"><p>How's</p></div>
    <div id="div3" class="inactive"><p>it</p></div>
    <div id="div4" class="inactive"><p>going</p></div>
    <div id="div5" class="inactive"><p>?</p></div>
    <div id="div6" class="inactive"><p>!</p></div>

    <button class="iterate">click me!</button>

    <script type="text/javascript">
        jQuery(document).ready(function($) {
            var divs = document.querySelectorAll('div');

            $('.iterate').on('click', function(e){
                e.preventDefault();
                count = (count + 1) % divs.length;

                divs[count].className=divs[(count+5) % divs.length].className;
                divs[(count+5) % divs.length].className="inactive";

            });

        });
    </script>
    </body>
</html>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Loop over DOM elements</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

	<style type="text/css">
	div {
	width: 200px;
	height: 100px;
	border: 1px solid black;
	margin: 30px auto;
	}

	div p {
	position: relative;
	text-align: center;
	font-weight: 600;
	letter-spacing: 3px;
	top: 25px;
	}

	button {
	display: block;
	margin: 50px auto 10px auto;
	width: 75px;
	}

	.inactive {
	display: none;
	background-color: hsla(0, 0%, 0%, 0.2);
	}

	.active {
	background-color: hsla(0, 50%, 80%, 0.6);
	}

	</style>
	</head>
	<body>

	<div id="div1" class="active"><p>Hey</p></div>
	<div id="div2" class="inactive"><p>How's</p></div>
	<div id="div3" class="inactive"><p>it</p></div>
	<div id="div4" class="inactive"><p>going</p></div>
	<div id="div5" class="inactive"><p>?</p></div>
	<div id="div6" class="inactive"><p>!</p></div>

	<button class="iterate">click me!</button>

	<script type="text/javascript">
	jQuery(document).ready(function($) {
	var divs = document.querySelectorAll('div');

	$('.iterate').on('click', function(e){
	e.preventDefault();
	count = (count + 1) % divs.length;

	divs[count].className=divs[(count+5) % divs.length].className;
	divs[(count+5) % divs.length].className="inactive";

	});

	});
	</script>
	</body>
	</html>