Ask your Question

Discover our new Professionals

rakesh
rakesh

Software Developer

Delhi,  India
Prashant
Prashant

Web Developer

Noida,  India
shubham
shubham

php developer

noida,  India
Divyanshu
Divyanshu

Having experience in android development

Noida,  India
Parul
Parul

I am a java developer, having 2 year of experience in Java

Delhi,  India

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

Please rotate your device

We don't support landscape mode on your device. Please rotate to portrait mode for the best view of our site