accordion

by slawe

HTML

<ul id="accordion">
    <li><img class="arrow-img rotate2" src="http://www2.psd100.com/ppp/2013/11/0601/Small-down-arrow-icon-1106011554.png" /> Menu One</li>
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
        
    <li><img class="arrow-img rotate2" src="http://www2.psd100.com/ppp/2013/11/0601/Small-down-arrow-icon-1106011554.png" /> Menu Two </li>
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
   
    
    <li><img class="arrow-img rotate2" src="http://www2.psd100.com/ppp/2013/11/0601/Small-down-arrow-icon-1106011554.png" /> Menu Three    </li>
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>

</ul>

CSS

body{
    font-family: Calibri, Arial;
    font-size:14px;
}
#accordion {
    list-style: none;
    padding: 0 0 0 0;
    width: 100%;
    margin:0;
 
}
#accordion li{
    display: block;
    background-color: #FF9927;
   border:1px solid #FF9927; 
    font-weight: bold;
    margin-bottom: 0px;
    margin-top: 10px;
    cursor: pointer;
    padding: 5px 5px 5px 6px;
    -webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

#accordion li img {
    transform: rotate(0deg);
    transition: .5s;
    width: 20px;
}
#accordion li.active img {
    transform: rotate(540deg);
    transition: .5s;
}

#accordion li + div {
    margin-bottom:2px;
    padding: 10px;
    display: none;
    border-bottom:1px solid #FF9927;
    border-left:1px solid #FF9927;
    border-right:1px solid #FF9927;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    transition: all 300ms;
}

#accordion li.active + div {
    display: block;
    ransition: all 300ms;
}

#accordion li.active {
    color: #42b449;
}

JavaScript

$(function() {
    /* Bindujemo JEDAN event na jedan element koji propagira na child-ove */
    $("#accordion").on('click', 'li', function() {
        
        $(this).toggleClass('active').siblings().removeClass('active');      
       
    });
});