Ask your Question

PEOPLE YOU MIGHT KNOW

Pooja
Pooja

Chiplun,  India
Everest Educational
Everest Educational

Visa Consultants in Punjab

Ludhiana,  India
Vikas
Vikas

Web developer

Gurgaon,  India
Space
Space

Courier Services

Birmingham,  United Kingdom
MobileComm
MobileComm

MobileComm Professionals Inc.

Richardson,  United States

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