Change Div

Change a series of divs to track where in a series slideshow is currently at.

by Paul Schmitt

HTML

<div id="content">
    <div id="indicator">
        <div id="dot" class="selected" onClick="location.href='#a1'"></div>
        <div id="dot" class="unselected" onClick="location.href='#a2'"></div>
        <div id="dot" class="unselected" onClick="location.href='#a3'"></div>
        <div id="dot" class="unselected" onClick="location.href='#a4'"></div>
    </div>
</div>

CSS

#content {
    width:100%;
    height:32px;
    background-color:red;
}
#indicator {
    float:left;
    position:absolute;
    display:table;
    left:5.5%;
    top:74%;
    margin:0;
    text-align: center;
    -moz-user-select:none;
    -webkit-user-select:none;
    z-index:10;
}
#dot {
    float:left;
    width:16px;
    height:16px;
    margin-left:8px;
    background-color:#D7D7D7;
}
#dot:hover {
    background-color:#FFF;
    cursor:pointer;
}
#dot.selected {
    background-color:#787878;
}
#dot.unselected {
    background-color:#D7D7D7;
}

JavaScript

$(document).ready(function () {
	    $("#content").click(function () {
	        $("#dot").toggleClass("selected unselected");
	        $("#dot").siblings().toggleClass("selected unselected");
	    });
	});