Skip to content

Instantly share code, notes, and snippets.

@soberdash

soberdash/index.html

Created October 2, 2019 15:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save soberdash/09701fbea8fe0cd1e9c60539ee69a892 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save soberdash/09701fbea8fe0cd1e9c60539ee69a892 to your computer and use it in GitHub Desktop.
Download ZIP
Org Chart
Raw
index.html
<div class="content">
<h1>Responsive Organization Chart (updated)</h1>
<figure class="org-chart cf">
<div class="board ">
<ul class="columnThree">
<li>
<span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li>
<span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li>
<span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
</ul>
<ul class="columnOne">
<li>
<span class="lvl-b">
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
</ul>
<ul class="columnTwo">
<li>
<span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li>
<span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
</ul>
<ul class="columnTwo">
<li>
<span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li>
<span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
</ul>
</div>
<ul class="departments ">
<li class="department ">
<span class="lvl-b">
<h3 id="detail" style="cursor:pointer; color:#92D4A8;">AKMIL X/001</h3>
<br>
<div class="more" >
<p align="left">
<img src="photo/depan.png" style="width:55px; height:80px; float:left; margin-right:7px;" />
<em>Nama :</em> Asep ko<br>
<em>NRP :</em> 012457454 <br>
<em>TMT Jabatan :</em> 01-02-2015 <br>
</p>
<button id="popModal_ex2" class="btn btn-link">Ubah</button>
</div>
</span>
<ul class="sections">
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
</ul>
</li>
<li class="department ">
<span class="lvl-b">
<h3 id="detail" style="cursor:pointer; color:#92D4A8;">SECAPA X/01</h3>
<br>
<div class="more" >
<p align="left">
<img src="photo/depan.png" style="width:55px; height:80px; float:left; margin-right:7px;" />
<em>Nama :</em> Asep ko<br>
<em>NRP :</em> 012457454 <br>
<em>TMT Jabatan :</em> 01-02-2015 <br>
</p>
<button id="popModal_ex2" class="btn btn-link">Ubah</button>
</div>
</span>
<ul class="sections">
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
</ul>
</li>
<li class="department ">
<span class="lvl-b">
<h3 id="detail" style="cursor:pointer; color:#92D4A8;">SECAPA X/01</h3>
<br>
<div class="more" >
<p align="left">
<img src="photo/depan.png" style="width:55px; height:80px; float:left; margin-right:7px;" />
<em>Nama :</em> Asep ko<br>
<em>NRP :</em> 012457454 <br>
<em>TMT Jabatan :</em> 01-02-2015 <br>
</p>
<button id="popModal_ex2" class="btn btn-link">Ubah</button>
</div>
</span>
<ul class="sections">
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
</ul>
</li>
<li class="department central">
<span class="lvl-b">
<h3 id="detail" style="cursor:pointer; color:#92D4A8;">SECAPA X/01</h3>
<br>
<div class="more" >
<p align="left">
<img src="photo/depan.png" style="width:55px; height:80px; float:left; margin-right:7px;" />
<em>Nama :</em> Asep ko<br>
<em>NRP :</em> 012457454 <br>
<em>TMT Jabatan :</em> 01-02-2015 <br>
</p>
<button id="popModal_ex2" class="btn btn-link">Ubah</button>
</div>
</span>
<ul class="sections">
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
</ul>
</li>
<li class="department ">
<span class="lvl-b">
<h3 id="detail" style="cursor:pointer; color:#92D4A8;">SECAPA X/01</h3>
<br>
<div class="more" >
<p align="left">
<img src="photo/depan.png" style="width:55px; height:80px; float:left; margin-right:7px;" />
<em>Nama :</em> Asep ko<br>
<em>NRP :</em> 012457454 <br>
<em>TMT Jabatan :</em> 01-02-2015 <br>
</p>
<button id="popModal_ex2" class="btn btn-link">Ubah</button>
</div>
</span>
<ul class="sections">
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
</ul>
</li>
<li class="department ">
<span class="lvl-b">
<h3 id="detail" style="cursor:pointer; color:#92D4A8;">SECAPA X/01</h3>
<br>
<div class="more" >
<p align="left">
<img src="photo/depan.png" style="width:55px; height:80px; float:left; margin-right:7px;" />
<em>Nama :</em> Asep ko<br>
<em>NRP :</em> 012457454 <br>
<em>TMT Jabatan :</em> 01-02-2015 <br>
</p>
<button id="popModal_ex2" class="btn btn-link">Ubah</button>
</div>
</span>
<ul class="sections">
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
</ul>
</li>
<li class="department ">
<span class="lvl-b">
<h3 id="detail" style="cursor:pointer; color:#92D4A8;">SECAPA X/01</h3>
<br>
<div class="more" >
<p align="left">
<img src="photo/depan.png" style="width:55px; height:80px; float:left; margin-right:7px;" />
<em>Nama :</em> Asep ko<br>
<em>NRP :</em> 012457454 <br>
<em>TMT Jabatan :</em> 01-02-2015 <br>
</p>
<button id="popModal_ex2" class="btn btn-link">Ubah</button>
</div>
</span>
<ul class="sections">
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
</ul>
</li>
</ul>
</figure>
</div>
Raw
script.js
$(document).ready ( function() {
$('#detail') .click ( function() {
var div = $(event.relatedTarget)
var id = div.data('id')
$('.more').fadeToggle()
})
})
Raw
style.css
.more {
display: none;
}
/* Varaibles - config */
/* SCSS*/
body {
background: #F5EEC9;
}
.content {
font-family: Verdana;
font-size: 14px;
position: relative;
}
.content * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.org-chart {
display: block;
clear: both;
margin-bottom: 30px;
position: relative;
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
/* Box colors */
/* 1 column */
/* 2 column */
/* 3 column */
/* DEPARTMENTS COLUMNs */
}
.org-chart.cf:before, .org-chart.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.org-chart.cf:after {
clear: both;
}
.org-chart.cf {
*zoom: 1;
}
.org-chart ul {
padding: 0;
margin: 0;
list-style: none;
}
.org-chart ul li {
position: relative;
}
.org-chart ul li span {
display: block;
border: 3px solid orange;
text-align: center;
overflow: hidden;
text-decoration: none;
color: black;
font-size: 12px;
box-shadow: 4px 4px 9px -4px rgba(0, 0, 0, 0.4);
-webkit-transition: all linear .1s;
-moz-transition: all linear .1s;
transition: all linear .1s;
background: #92D4A8;
padding: 4px;
}
.org-chart .lvl-b {
background: green;
color: #92D4A8;
}
.org-chart .board {
width: 70%;
margin: 0 auto;
display: block;
position: relative;
}
.org-chart .board:before {
content: "";
display: block;
position: absolute;
height: 600px;
width: 0px;
border-left: 2px solid orange;
margin-left: 49%;
top: 15px;
}
.org-chart ul.columnOne {
height: 90px;
position: relative;
width: 100%;
display: block;
clear: both;
}
.org-chart ul.columnOne li {
width: 30%;
margin: 0px auto;
top: 20px;
}
.org-chart ul.columnTwo {
position: relative;
width: 100%;
display: block;
height: 90px;
clear: both;
}
.org-chart ul.columnTwo li:first-child {
width: 30%;
float: left;
}
.org-chart ul.columnTwo li {
width: 30%;
float: right;
}
.org-chart ul.columnTwo:before {
content: "";
display: block;
position: relative;
width: 80%;
height: 10px;
border-top: 2px solid orange;
margin: 0 auto;
top: 40px;
}
.org-chart ul.columnThree {
position: relative;
width: 100%;
display: block;
clear: both;
}
.org-chart ul.columnThree li:first-child {
width: 30%;
float: left;
margin-left: 0;
}
.org-chart ul.columnThree li {
width: 30%;
margin-left: 5%;
float: left;
}
.org-chart ul.columnThree li:last-child {
width: 30%;
float: right;
margin-left: 0;
}
.org-chart ul.columnThree:before {
content: "";
display: block;
position: relative;
width: 80%;
height: 10px;
border-top: 2px solid orange;
margin: 0 auto;
top: 40px;
}
.org-chart .departments {
width: 100%;
display: block;
clear: both;
}
.org-chart .departments:before {
content: "";
display: block;
width: 85%;
height: 22px;
border-top: 2px solid orange;
border-left: 2px solid orange;
border-right: 2px solid orange;
margin: 0 auto;
top: 0px;
}
.org-chart .department {
border-left: 2px solid orange;
width: 13.2%;
float: left;
margin: 0px 4px;
}
.org-chart .department:after {
content: "";
position: absolute;
display: block;
width: 10px;
height: 22px;
border-left: 2px solid orange;
left: 50%;
top: -22px;
}
.org-chart .department:first-child:after {
display: none;
}
.org-chart .department:last-child:after {
display: none;
}
.org-chart .department.central {
background: #F5EEC9;
}
.org-chart .department.central:after {
display: none;
}
.org-chart .department span {
border-left: 1px solid orange;
}
.org-chart .department li {
padding-left: 25px;
border-bottom: 2px solid orange;
height: 80px;
}
.org-chart .department li span {
background: #92D4A8;
top: 38px;
position: absolute;
z-index: 1;
width: 95%;
height: auto;
vertical-align: middle;
right: 0px;
line-height: 14px;
border: 3px solid orange;
}
.org-chart .department .sections {
margin-top: -20px;
}
/* MEDIA QUERIES */
@media all and (max-width: 767px) {
.org-chart .board {
margin: 0px;
width: 100%;
}
.org-chart .departments:before {
border: none;
}
.org-chart .department {
float: none;
width: 100%;
margin-left: 0;
background: #F5EEC9;
margin-bottom: 40px;
}
.org-chart .department:before {
content: "";
display: block;
position: absolute;
width: 15px;
height: 60px;
border-left: 2px solid orange;
z-index: 1;
top: -45px;
left: 0%;
margin-left: -2px;
}
.org-chart .department:after {
display: none;
}
.org-chart .department:first-child:before {
display: none;
}
}
/*--------- TO BE REMOVED FROM YOUR CSS --*/
/* this is just to display the behaviour of responsive on codepen */
.responsive-content {
width: 767px;
margin: 0px auto;
}
.responsive-content .org-chart .board {
margin: 0px;
width: 100%;
}
.responsive-content .org-chart .departments:before {
border: none;
}
.responsive-content .org-chart .department {
float: none;
width: 100%;
margin-left: 0;
background: #F5EEC9;
margin-bottom: 40px;
}
.responsive-content .org-chart .department:before {
content: "";
display: block;
position: absolute;
width: 15px;
height: 60px;
border-left: 2px solid orange;
z-index: 1;
top: -45px;
left: 0%;
margin-left: -2px;
}
.responsive-content .org-chart .department:after {
display: none;
}
.responsive-content .org-chart .department:first-child:before {
display: none;
}
.exampleContainer {margin:-1px 0 50px}
.exampleContainer .exampleLive {padding:20px;font-size:14px}
.exampleContainer .exampleLive:after {content:'';clear:both;display:table}
.exampleContainer .exampleLive .exampleLiveTitle {border-left:5px solid #0084ff;margin:-20px -20px 20px;padding:10px 20px 10px 15px;font-size:20px;text-transform:uppercase}
.exampleContainer .exampleCode {background:#2b2f3b;padding:20px;overflow:auto}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment