Ask your Question

PEOPLE YOU MIGHT KNOW

Wedding
Wedding

Wedding Limo Services Company in Toronto

ON,  Canada
Fitness
Fitness

Be healthy and stay in shape

Mohali,  India
Everest Links
Everest Links

Everest Links Management Consultants

Dubai,  United Arab Emirates
Varun
Varun

Business Owner

Gurugram,  India
Sithu
Sithu

Web Developer

Chennai,  India

Write to us

Ask Question

Simple Accordion in jQuery, Accordion in jQuery

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>

0   0
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