I want to convert a UL LI structure into accordion but without using Jquery.
I am using Angular JS, that's why I don't want to use Jquery and no Bootsrap either as I have my data which gets displayed in UL LI structure only. Please help me convert UL LI to accordion.
I found this link which create an accordion with HTML + CSS only
https://codepen.io/abergin/pen/ihlDf
CSS
$white: rgba(254,255,250,1)
$grey: rgba(220,231,235,1)
$red: rgba(255,104,115,1)
$black: rgba(48,69,92,0.8)
$sans: 'Titillium Web', sans-serif
.transition
transition: all 0.25s ease-in-out
.flipIn
animation: flipdown 0.5s ease both
.no-select
-webkit-tap-highlight-color: rgba(0,0,0,0)
-webkit-touch-callout: none
-webkit-user-select: none
-khtml-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
html
width: 100%
height: 100%
perspective: 900
overflow-y: scroll
background-color: $grey
font-family: $sans
color: $black
body
min-height: 0
display: inline-block
position: relative
left: 50%
margin: 90px 0
transform: translate( -50% , 0 )
box-shadow: 0 10px 0 0 $red inset
background-color: $white
max-width: 450px
padding: 30px
@media ( max-width:550px )
box-sizing: border-box
transform: translate( 0 , 0 )
max-width: 100%
min-height: 100%
margin: 0
left: 0
h1 , h2
color: $red
h1
text-transform: uppercase
font-size: 36px
line-height: 42px
letter-spacing: 3px
font-weight: 100
@extend .flipIn
h2
font-size: 26px
line-height: 34px
font-weight: 300
letter-spacing: 1px
display: block
background-color: $white
margin: 0
cursor: pointer
@extend .no-select
p
color: $black
font-size: 17px
line-height: 26px
letter-spacing: 1px
position: relative
overflow: hidden
max-height: 800px
@extend .transition
opacity: 1
transform: translate( 0 , 0 )
margin-top: 14px
z-index: 2
ul
list-style: none
perspective: 900
padding: 0
margin: 0
li
position: relative
padding: 0
margin: 0
padding-bottom: 4px
padding-top: 18px
border-top: 1px dotted $grey
@extend .flipIn
&:nth-of-type(1)
animation-delay: 0.5s
&:nth-of-type(2)
animation-delay: 0.75s
&:nth-of-type(3)
animation-delay: 1.0s
&:last-of-type
padding-bottom: 0
i
position: absolute
transform: translate( -6px , 0 )
margin-top: 16px
right: 0
&:before , &:after
content: ""
@extend .transition
position: absolute
background-color: $red
width: 3px
height: 9px
&:before
transform: translate( -2px , 0 ) rotate( 45deg )
&:after
transform: translate( 2px , 0 ) rotate( -45deg )
input[type=checkbox]
position: absolute
cursor: pointer
width: 100%
height: 100%
z-index: 1
opacity: 0
&:checked
&~p
margin-top: 0
max-height: 0
opacity: 0
transform: translate( 0 , 50% )
&~i
&:before
transform: translate( 2px , 0 ) rotate( 45deg )
&:after
transform: translate( -2px , 0 ) rotate( -45deg )
@keyframes flipdown
0%
opacity: 0
transform-origin: top center
transform: rotateX(-90deg)
5%
opacity: 1
80%
transform: rotateX(8deg)
83%
transform: rotateX(6deg)
92%
transform: rotateX(-3deg)
100%
transform-origin: top center
transform: rotateX(0deg)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } body { line-height: 1 } ol, ul { list-style: none } .nav a, .nav label { display: block; padding: .85rem; color: #fff; background-color: #151515; box-shadow: inset 0 -1px #1d1d1d; -webkit-transition: all .25s ease-in; transition: all .25s ease-in; } .nav a:focus, .nav a:hover, .nav label:focus, .nav label:hover { color: rgba(255, 255, 255, 0.5); background: #030303; } .nav label { cursor: pointer; } /** * Styling first level lists items */ .group-list a, .group-list label { padding-left: 2rem; background: #252525; box-shadow: inset 0 -1px #373737; } .group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { background: #131313; } /** * Styling second level list items */ .sub-group-list a, .sub-group-list label { padding-left: 4rem; background: #353535; box-shadow: inset 0 -1px #474747; } .sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover { background: #232323; } /** * Styling third level list items */ .sub-sub-group-list a, .sub-sub-group-list label { padding-left: 6rem; background: #454545; box-shadow: inset 0 -1px #575757; } .sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover { background: #333333; } /** * Hide nested lists */ .group-list, .sub-group-list, .sub-sub-group-list { height: 100%; max-height: 0; overflow: hidden; -webkit-transition: max-height .5s ease-in-out; transition: max-height .5s ease-in-out; } .nav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */ max-height: 1000px; } /** * Rotating chevron icon */ label > span { float: right; -webkit-transition: -webkit-transform .65s ease; transition: transform .65s ease; } .nav__list input[type=checkbox]:checked + label > span { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
<nav class="nav" role="navigation"> <ul class="nav__list"> <li> <input id="group-1" type="checkbox" hidden=""> <label for="group-1"><span class="fa fa-angle-right"></span> First level</label> <ul class="group-list"> <li><a href="#">1st level item</a></li> <li> <input id="sub-group-1" type="checkbox" hidden=""> <label for="sub-group-1"><span class="fa fa-angle-right"></span> Second level</label> <ul class="sub-group-list"> <li><a href="#">2nd level nav item</a></li> <li><a href="#">2nd level nav item</a></li> <li><a href="#">2nd level nav item</a></li> <li> <input id="sub-sub-group-1" type="checkbox" hidden=""> <label for="sub-sub-group-1"><span class="fa fa-angle-right"></span> Third level</label> <ul class="sub-sub-group-list"> <li><a href="#">3rd level nav item</a></li> <li><a href="#">3rd level nav item</a></li> <li><a href="#">3rd level nav item</a></li> </ul> </li> </ul> </li> </ul> </li> <li> <input id="group-2" type="checkbox" hidden=""> <label for="group-2"><span class="fa fa-angle-right"></span> First level</label> <ul class="group-list"> <li> </li><li><a href="#">1st level item</a></li> <li><a href="#">1st level item</a></li> <input id="sub-group-2" type="checkbox" hidden=""> <label for="sub-group-2"><span class="fa fa-angle-right"></span> Second level</label> <ul class="sub-group-list"> <li><a href="#">2nd level nav item</a></li> <li><a href="#">2nd level nav item</a></li> <li> <input id="sub-sub-group-2" type="checkbox" hidden=""> <label for="sub-sub-group-2"><span class="fa fa-angle-right"></span> Third level</label> <ul class="sub-sub-group-list"> <li><a href="#">3rd level nav item</a></li> </ul> </li> </ul> </ul> </li> <li> <input id="group-3" type="checkbox" hidden=""> <label for="group-3"><span class="fa fa-angle-right"></span> First level</label> <ul class="group-list"> <li> </li><li><a href="#">1st level item</a></li> <li><a href="#">1st level item</a></li> <input id="sub-group-3" type="checkbox" hidden=""> <label for="sub-group-3"><span class="fa fa-angle-right"></span> Second level</label> <ul class="sub-group-list"> <li><a href="#">2nd level nav item</a></li> <li><a href="#">2nd level nav item</a></li> <li><a href="#">2nd level nav item</a></li> <li> <input id="sub-sub-group-3" type="checkbox" hidden=""> <label for="sub-sub-group-3"><span class="fa fa-angle-right"></span> Third level</label> <ul class="sub-sub-group-list"> <li><a href="#">3rd level nav item</a></li> <li><a href="#">3rd level nav item</a></li> <li><a href="#">3rd level nav item</a></li> </ul> </li> </ul> </ul> </li> <li> <input id="group-4" type="checkbox" hidden=""> <label for="group-4"><span class="fa fa-angle-right"></span> First level</label> <ul class="group-list"> <li> </li><li><a href="#">1st level item</a></li> <input id="sub-group-4" type="checkbox" hidden=""> <label for="sub-group-4"><span class="fa fa-angle-right"></span> Second level</label> <ul class="sub-group-list"> <li><a href="#">2nd level nav item</a></li> <li><a href="#">2nd level nav item</a></li> </ul> </ul> </li> </ul> </nav>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.