Skip to content

Instantly share code, notes, and snippets.

@ve3

ve3/html-list-expand-collapsible.html

Created July 4, 2021 06:13
Show Gist options
  • Save ve3/f398561f1e8392f731c4b73b58afae03 to your computer and use it in GitHub Desktop.
Save ve3/f398561f1e8392f731c4b73b58afae03 to your computer and use it in GitHub Desktop.
Download ZIP
Expand/Collapse HTML list (https://codepen.io/ve3/pen/MWmaVxz)
Raw
html-list-expand-collapsible.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="rundiz-expandcollapse-list">
<ul>
<li>
<span class="rundiz-list-item-icon rundiz-list-item-icon-parent"></span>
This is parent item that have children.
<ul>
<li>
<span class="rundiz-list-item-icon rundiz-list-item-icon-parent"></span>
Parent item 1
<ul>
<li>1.1</li>
</ul>
</li>
<li>
<span class="rundiz-list-item-icon rundiz-list-item-icon-parent"></span>
Parent item 2
<ul>
<li>2.1</li>
<li>2.2</li>
</ul>
</li>
<li>Normal item 1</li>
<li>
<span class="rundiz-list-item-icon rundiz-list-item-icon-parent"></span>
Parent item 3
<ul>
<li>3.1</li>
</ul>
</li>
<li>Normal item 2</li>
<li>Normal item 3</li>
</ul>
</li>
<li>This is normal item that has no child.</li>
<li>Created by <a href="https://rundiz.com" target="rundizcom">rundiz.com</a><!-- credits can be remove --></li>
</ul>
</div>
<p>See it in action <a href="https://codepen.io/ve3/pen/MWmaVxz">here</a>.</p>
<script type="application/javascript" src="script.js"></script>
</body>
</html>
Raw
script.js
/**
* Listen on click and expand/collapse list.
*/
function rundizListenClickExpandCollapseList() {
document.addEventListener('click', (event) => {
if (
event.target &&
event.target.classList &&
event.target.classList.contains('rundiz-list-item-icon')
) {
event.preventDefault();
let thisElement = event.target;
let liElement = thisElement.closest('li');
if (liElement.classList.contains('expanded')) {
liElement.classList.remove('expanded');
} else {
liElement.classList.add('expanded');
}
}
});
}
document.addEventListener('DOMContentLoaded', () => {
rundizListenClickExpandCollapseList();
});
Raw
style.css
/* collapse/expand css */
.rundiz-expandcollapse-list ol ol,
.rundiz-expandcollapse-list ul ul {
display: none;/* you can use height, visible and make it transition (animated) instead of just display */
margin-bottom: 0;
}
.rundiz-expandcollapse-list li.expanded > ol,
.rundiz-expandcollapse-list li.expanded > ul {
display: block;
}
.rundiz-expandcollapse-list li .rundiz-list-item-icon-parent::before {
content: '⍄';/* collapsed icon */
/* example using FontAwesome
content: "\f0fe";
font-family: "Font Awesome 5 Free";
font-weight: 400;
*/
}
.rundiz-expandcollapse-list li.expanded > .rundiz-list-item-icon-parent::before {
content: '⍌';/* expanded icon */
/* example using FontAwesome
content: "\f146";
font-family: "Font Awesome 5 Free";
font-weight: 400;
*/
}
.rundiz-expandcollapse-list .rundiz-list-item-icon {
cursor: pointer;
}
/* CSS folder tree
@link https://codepen.io/khoama/pen/hpljA Original.
*/
.rundiz-expandcollapse-list > ul,
.rundiz-expandcollapse-list > ol {
margin: 0;
}
.rundiz-expandcollapse-list ul,
.rundiz-expandcollapse-list ol {
line-height: 2em;
list-style: none;
margin: 0 0 0 20px;
padding: 0;
}
.rundiz-expandcollapse-list li {
position: relative;
}
.rundiz-expandcollapse-list li::before {
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
content: '';
display: block;
height: 1em;
left: -15px;
position: absolute;
top: 0;
width: 10px;
}
.rundiz-expandcollapse-list li::after{
border-left: 1px solid #ccc;
bottom: -7px;
content: '';
display: block;
height: 100%;
left: -15px;
position: absolute;
}
.rundiz-expandcollapse-list li:last-child::after {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment