matheustp/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Folder Structure</title>
    <style>
            .container {
                display: block;
                position: absolute;
            }

            ul {
                list-style-type: none;
                width: 100%;
                margin-top: 9px;
                opacity: 1;
                /*transition: .2s all linear;*/
            }

            li {
                position: relative;
            }

            .icon {
                cursor: pointer;
                border: 1px solid black;
                border-radius: 3px;
                position: absolute;
                left: -23px;
                background-color: lightgray;
                height: 18px;
                z-index: 1;
            }

            li:before {
                position: absolute;
                content: "";
                top: 0;
                left: -22px;
                border-bottom: 1px dashed black;
                height: 9px;
                width: 20px;
            }

            li:after {
                position: absolute;
                content: "";
                top: -9px;
                left: -22px;
                border-left: 1px dashed black;
                height: 100%;

                width: 20px;
            }

            li:nth-last-child(1):after {
                height: 18px;
            }
            .hide {
                opacity: 0;
                visibility: hidden;
                height: 0;
            }
        </style>
</head>
<body>


<div class="container">
        <ul>
            <li><span class="icon">&rarrhk;</span>2018
                <ul>
                    <li><span class="icon">&rarrhk;</span>Nov
                        <ul>
                            <li>27</li>
                        </ul>
                    </li>
                    <li><span class="icon">&rarrhk;</span>Ago
                        <ul>
                            <li>21</li>
                            <li>02</li>
                        </ul>
                    </li>
                    <li><span class="icon">&rarrhk;</span>Jul
                        <ul>
                            <li>27</li>
                            <li>19</li>
                            <li>05</li>
                        </ul>
                    </li>
                    <li><span class="icon">&rarrhk;</span>Jun
                        <ul>
                            <li>26</li>
                            <li>14</li>
                            <li>07</li>
                        </ul>
                    </li>
                    <li><span class="icon">&rarrhk;</span>Abr
                        <ul>
                            <li>26</li>
                            <li>05</li>
                        </ul>
                    </li>
                    <li><span class="icon">&rarrhk;</span>Mar
                        <ul>
                            <li>15</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <script>
        [].slice.call(document.querySelectorAll('.icon')).forEach((el) => {
            el.nextElementSibling.classList.add('hide')
            el.addEventListener('click', function (e) {
                el.nextElementSibling.classList.contains('hide') ? el.nextElementSibling.classList.remove('hide') : el.nextElementSibling.classList.add('hide')
            })
        })
        </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Folder Structure</title>
	<style>
	.container {
	display: block;
	position: absolute;
	}

	ul {
	list-style-type: none;
	width: 100%;
	margin-top: 9px;
	opacity: 1;
	/transition: .2s all linear;/
	}

	li {
	position: relative;
	}

	.icon {
	cursor: pointer;
	border: 1px solid black;
	border-radius: 3px;
	position: absolute;
	left: -23px;
	background-color: lightgray;
	height: 18px;
	z-index: 1;
	}

	li:before {
	position: absolute;
	content: "";
	top: 0;
	left: -22px;
	border-bottom: 1px dashed black;
	height: 9px;
	width: 20px;
	}

	li:after {
	position: absolute;
	content: "";
	top: -9px;
	left: -22px;
	border-left: 1px dashed black;
	height: 100%;

	width: 20px;
	}

	li:nth-last-child(1):after {
	height: 18px;
	}
	.hide {
	opacity: 0;
	visibility: hidden;
	height: 0;
	}
	</style>
	</head>
	<body>


	<div class="container">
	<ul>
	<li><span class="icon">&rarrhk;</span>2018
	<ul>
	<li><span class="icon">&rarrhk;</span>Nov
	<ul>
	<li>27</li>
	</ul>
	</li>
	<li><span class="icon">&rarrhk;</span>Ago
	<ul>
	<li>21</li>
	<li>02</li>
	</ul>
	</li>
	<li><span class="icon">&rarrhk;</span>Jul
	<ul>
	<li>27</li>
	<li>19</li>
	<li>05</li>
	</ul>
	</li>
	<li><span class="icon">&rarrhk;</span>Jun
	<ul>
	<li>26</li>
	<li>14</li>
	<li>07</li>
	</ul>
	</li>
	<li><span class="icon">&rarrhk;</span>Abr
	<ul>
	<li>26</li>
	<li>05</li>
	</ul>
	</li>
	<li><span class="icon">&rarrhk;</span>Mar
	<ul>
	<li>15</li>
	</ul>
	</li>
	</ul>
	</li>
	</ul>
	</div>
	<script>
	[].slice.call(document.querySelectorAll('.icon')).forEach((el) => {
	el.nextElementSibling.classList.add('hide')
	el.addEventListener('click', function (e) {
	el.nextElementSibling.classList.contains('hide') ? el.nextElementSibling.classList.remove('hide') : el.nextElementSibling.classList.add('hide')
	})
	})
	</script>
	</body>
	</html>