Custom left-right setting-like panel v1.0

HTML
<!-- Custom left-right setting-like panel v1.0 ** See description for "How to use this snippet". ** --> <div style="font-weight:bold;margin:5px;" >Settings</div> <span class="hr full light" ></span> <div class="leftWrap"> <a class="chooser" id="chooser1" toggle="account" viewid="1">Account <span class="imgWrap" ></span> </a> <a class="chooser" id="chooser2" toggle="other" viewid="2">Other settings <span class="imgWrap" ></span> </a> </div> <div class="rightWrap"> <div class="chosen" id="account" viewid="chosen1" > <span class="b" >Account settings</span> <span class="hr full light" ></span> <input type="text" placeholder="Username"/> <input type="text" placeholder="Email"/> <div class="set_globalbtn">Save settings</div> </div> <div class="chosen none" id="other" viewid="chosen2" > <span class="b" >Other settings</span> <span class="hr full light" ></span> <label> <input type="checkbox"/> Extra settings and stuffs </label> <label> <input type="checkbox"/> Extra settings and stuffs </label> <label> <input type="checkbox"/> Extra settings and stuffs </label> <div class="set_globalbtn">Save settings</div> </div> </div>
CSS
.leftWrap{ display: block; float: left; width: 15%; color: #eee; height: auto; } .leftWrap .chooser{ display: block; cursor: pointer; float: left; width: 100%; padding: 10px; box-sizing: border-box; overflow: auto; text-align: left; color: #444; background-color:#eee; } .leftWrap .chooser:hover{ background-color: #f5f5f5; color: #111; } .leftWrap .chooser:active{ box-shadow: 0 0 2px #eee; } .imgWrap{ display:inline-block; float:right; margin-top:2px; width:15px; height:15px; background-size:contain; background-repeat:no-repeat; background-image: url(http://www.freeiconspng.com/uploads/settings-icon-1.png); } .rightWrap{ display: block; float: left; width: 84%; height: auto; overflow: auto; margin-left: 1%; background-color:#eee; padding:10px; box-sizing:border-box; } .b{ font-weight:bold; } label{ display:block; cursor:pointer; } .set_globalbtn{ display:block; margin-top:5px; padding:8px; background-color: #569E7A; cursor: pointer; color: #eee; border-right: 4px; box-shadow:inset 0px -4px 0px #306d3c; width: 100px; } .set_globalbtn:active{ background-color: #306d3c; } .hr.full.light{ display:block; width: 100%; margin-top:5px; margin-bottom:5px; background-color: #d5d5d5; height:1px; } .none{ display:none; }
JAVASCRIPT
function viewEl(id) { document.getElementById(id).style.display = "block"; } function unviewEl(id) { document.getElementById(id).style.display = "none"; } function highlight(id){ document.getElementById(id).style.backgroundColor = "#D8D8D8"; } function unhighlight(id){ document.getElementById(id).style.backgroundColor = ""; } var choosers = document.getElementsByClassName("chooser"); var chooserTotal = choosers.length; for ( var i=0;i<choosers.length;i++ ){ choosers[i].onmousedown = toggleView; } var chosen = document.getElementsByClassName("chosen"); function toggleView() { var what = this.getAttribute("toggle"); viewEl(what); highlight(this.id); var curVid = "chosen"+this.getAttribute("viewid"); for( var i=0;i<2;i++ ){ if( document.getElementsByClassName("chosen")[i].getAttribute("viewid") != curVid ) { unviewEl(document.getElementsByClassName("chosen")[i].id); unhighlight(document.getElementsByClassName("chooser")[i].id); } } }
Expand for more options Login