Accordion Menu 2

by TapeshwarKumar

HTML

<ul id="accordion">
  <li><div>Sports1</div>    
  </li>
    <li><div>Sports<img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png"/></div>
        <ul>
            <li><a href="#">Golf</a></li>
            <li><a href="#">Cricket</a></li>
            <li><a href="#">Football</a></li>
        </ul>
    </li>
    <li><div>Technology<img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png"/></div>
        <ul>
            <li><a href="#">iPhone</a></li>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Twitter</a></li>
        </ul>
    </li>
    <li><div>Latest<img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png"/></div>
        <ul>
            <li><a href="#">Obama</a></li>
            <li><a href="#">Iran Election</a></li>
            <li><a href="#">Health Care</a></li>
        </ul>
    </li>
</ul>

CSS

#accordion {
    list-style: none;
    padding: 0 0 0 0;
    width: 170px;
    margin: 15px;
}
#accordion div {
    display: block;
    background-color: red;
    margin: 1px;
    cursor: pointer;
    padding: 5 5 5 7px;
    list-style: circle;
    font-family: arial;
}
#accordion li div{
    color: white;
    padding: 10px;
}
#accordion ul {
    list-style: none;
    padding: 0 0 0 0;
}
#accordion ul{
    display: none;
}
#accordion ul li {
    font-weight: normal;
    cursor: auto;
    background-color: #fff;
    padding: 0 0 0 7px;
}
#accordion a {
    text-decoration: none;
}
#accordion a:hover {
    text-decoration: underline;
}

.active{font-weight:bold;}
img{
  transition: all 300ms ease-in 0s;
  height:16px;
  width:16px;
}
img.active{
  transform:rotate(180deg);
}

JavaScript

$("#accordion > li > div").click(function(){
    if(false == $(this).next().is(':visible')) {
        $('#accordion ul').slideUp(300);
    }
    $(this).next().slideToggle(300);
    $(this).parent('li').siblings().find('div.active').find('img').removeClass('active'); $(this).parent('li').siblings().find('div.active').removeClass('active');
   
    $(this).toggleClass('active');
    $(this).find('img').toggleClass('active');
});