Ask your Question

Write to us

Ask Question

Simple Accordion in jQuery, Accordion in jQuery

Shailesh Kumar

I'm sharing simple jQuery Accordion which can be used anywhere in your project where you want to be accordian.

<html>
<head>
    <title>Menu Slide Accordian</title>
    <script type="text/javascript" src="
https://code.jquery.com/jquery-1.11.3.js"></script>
    <script>
        jQuery(document).ready(function(){    
            jQuery('.child-trigger').click(function() {
            jQuery(this).parent().siblings('.menu-item-has-children').find('.child-trigger').removeClass('activate');
            jQuery(this).parent().siblings('.menu-item-has-children').find('ul.sub-menu').slideUp(250);
            jQuery(this).next('ul.sub-menu').slideToggle(250);
            jQuery(this).next('ul.sub-menu').children('.menu-item-has-children').find('ul.sub-menu').slideUp(250);
            jQuery(this).next('ul.sub-menu').children('.menu-item-has-children').find('.child-trigger').removeClass('activate');
            jQuery(this).toggleClass('activate');
            return false;
            });    
        });    
    </script>
    
    <style>    
        ul,li{
            padding:0;
            margin:0;
        }    
        .menuSlide {
            background: #0aa899;
            height: 100%;
            max-width: 440px;
            width:100%;
            top: 0;
            position: fixed;
            overflow: scroll;
            overflow-x: hidden;
            overflow-y: auto;
            max-height: 100%;
            -webkit-transition: all .4s ease;
            -moz-transition: all .4s ease;
            transition: all .4s ease;
        }
        
        ul.sub-menu{
            display:none;
        }
    
        .menuSlide li {
            display: block;
            padding-right: 0;
            border-bottom: 1px solid rgba(255, 255, 255, .35);
            position: relative;
        }
        
        .menuSlide li a {
            font-size: 16px;
            padding: 20px 10px 20px 40px;
            line-height: 20px;
            display: block;
            color: #ffffff;
            text-transform: uppercase;
            text-decoration:none;
        }
    
        .menuSlide ul.sub-menu {
            background-color: rgba(10, 156, 142, 0.63);
        }
        
        .menuSlide .child-trigger {
            display: block;
            cursor: pointer;
            position: absolute;
            top: 0;
            right: 0;
            width: 55px;
            min-width: 55px;
            height: 60px;
            padding: 0;
            border-left: 1px solid rgba(255, 255, 255, .20);
        }
        
        .child-trigger i, 
        .child-trigger i:after {
            width: 10px;
            height: 1px;
            background-color: #fff;
            display: block;
        }
        
        .child-trigger i {
            position: relative;
            top: 50%;
            margin: 0 auto;
        }
        
        .child-trigger i:after {
            position: absolute;
            content: '';
        }
        
        .child-trigger i:after {
            -webkit-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }
        
        .child-trigger.activate i:after {
            -webkit-transform: rotate(-180deg);
            -ms-transform: rotate(-180deg);
            transform: rotate(-180deg);
    }    
    </style>
    
</head>

<body>
    <div class="menuSlide">
        <ul>
            <li class="menu-item"><a href="">Home</a></li>
            <li class="menu-item"><a href="">Portfolio</a></li>
            <li class="menu-item menu-item-has-children"><a href="#">Slide1</a>
                <div class="child-trigger"><i></i></div>
                <ul class="sub-menu" style="">
                    <li><a href="">Sub-slide</a></li>
                    <li><a href="">Sub-slide</a></li>
                    <li><a href="">Sub-slide</a></li>
                    <li><a href="">Sub-slide</a></li>
                    <li><a href="">Sub-slide</a></li>
                    <li><a href="">Sub-slide</a></li>
                    <li><a href="">Sub-slide</a></li>
                </ul>
            </li>
            
            <li class="menu-item menu-item-has-children"><a href="#">Slide2</a>
                <div class="child-trigger"><i></i></div>
                <ul class="sub-menu" style="">
                    <li><a href="">Sub-slide</a></li>
                    <li><a href="">Sub-slide</a></li>
                    <li><a href="">Sub-slide</a></li>
                    <li><a href="">Sub-slide</a></li>
                    <li><a href="">Sub-slide</a></li>
                    <li><a href="">Sub-slide</a></li>
                    <li><a href="">Sub-slide</a></li>
                </ul>
            </li>
            
            <li class="menu-item menu-item-has-children"><a href="#">Slide2</a>
                <div class="child-trigger"><i></i></div>
                <ul class="sub-menu" style="">
                    <li><a href="">Sub-slide</a></li>
                    <li><a href="">Sub-slide</a></li>
                    <li><a href="">Sub-slide</a></li>
                    <li><a href="">Sub-slide</a></li>
                    <li><a href="">Sub-slide</a></li>
                    <li><a href="">Sub-slide</a></li>
                    <li><a href="">Sub-slide</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>

</html>

Shailesh Kumar