Accordion 2015

by Ying Chor Ding

HTML

<div id="accordion">
        <ul>
            <li class="accordion-toggle plus icon-airlines">Top Level 1
            <ul class="accordion-content">
                <li class="sub-accordion-toggle">Sub Level 1  aaasdasdasd</li>
                <li class="sub-accordion-toggle">Sub Level 2</li>
            </ul>
            </li>
            
            <li class="accordion-toggle plus icon-restaurants">Top Level 2</li>
            <ul class="accordion-content">
                <li class="sub-accordion-toggle">Sub Level 1</li>
                <li class="sub-accordion-content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit quam odio, consequat pharetra felis lobortis egestas.</p>
                    <p>Phone:(800) 555-1212</p>
                </li>
                <li class="sub-accordion-toggle">Sub Level 2</li>
                <li class="sub-accordion-content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit quam odio, consequat pharetra felis lobortis egestas.</p>
                    <p>Phone:(800) 555-1212</p>
                </li>
            </ul>
        </ul>
    </div>

CSS

/* RESET */
	html, body, address, blockquote, div, form, fieldset, caption, h1, h2, h3, h4, h5, h6, hr, ul, li, ol, ul, table, tr, td, th, p, img {
	    margin:0;
	    padding:0;
	}
	img, fieldset {
	    border:none;
	}
	/* START OF STYLES */
	#accordion {
	    position:relative;
	    margin:0 auto;
	    width:522px;
	    font-family:"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	}
	.accordion-toggle {
	    background-color:#0168b3;
	    font-weight:normal;
	    font-size:20px;
	    color:#fff;
	    line-height:100%;
	    padding:16px 0 16px 48px;
	}
	.icon-airlines {
	    background: url('../images/icon-airlines.png') 8px 10px no-repeat;
	    background-color:#0168b3;
	}
	.icon-restaurants {
	    background: url('../images/icon-restaurants.png') 8px 10px no-repeat;
	    background-color:#0168b3;
	}
	.icon-shopping {
	    background: url('../images/icon-shopping.png') 8px 10px no-repeat;
	    background-color:#0168b3;
	}
	.icon-amenities {
	    background: url('../images/icon-amenities.png') 8px 10px no-repeat;
	    background-color:#0168b3;
	}
	.accordion-toggle:hover {
	    background-color:#045c8f;
	}
	.status-plus {
	    float:right;
	    height:52px;
	    width:52px;
	    padding:0;
	    content:"+";
	    text-align:right;
	    clear:both;
	    display:none;
	}
  .minus,
    .minus:hover{background: red}
	.status-minus {
	    float:right;
	    content:"-";
	    text-align:right;
	    clear:both;
	}
	.accordion-toggle {
	    cursor: pointer;
	    margin:0 0 1px 0;
	}
	.accordion-content {
	    display: none;
	}
	.accordion-content.default {
	    display: block;
	}
	.accordion-content {
	    background:#02324d;
	}
	.sub-accordion-toggle {
	    cursor: pointer;
	    color:#fff;
	    font-size:18px;
	    font-weight:normal;
	    line-height:100%;
	    padding:10px 0 10px 20px;
	}
	.sub-accordion-toggle:hover {
	    background:#02283e;
	}
	.sub-accordion-content {
	    display: none;
	}
	.sub-accordion-content {
	   ...

JavaScript

$(document).ready(function ($) {
    $('#accordion').find('.accordion-toggle').click(function () {

        //Expands or collapses clicked panel
        if ( $(this).hasClass('plus') ) {
            // if this is closed
            if ( $(this).siblings('li').hasClass('minus') ) {
                $(this).siblings('li').removeClass('minus').addClass('plus');   
            }
            $(this).removeClass('plus').addClass('minus').next().slideToggle('fast');
        } else {
            if ( $(this).siblings('li').hasClass('plus') ) {
                $(this).siblings('li').removeClass('minus').addClass('plus');   
            }
            $(this).removeClass('minus').addClass('plus').next().slideToggle('fast');            
        }

        //Hides any other expanded panels
        $(".accordion-content").not($(this).next()).slideUp('fast');
    });



});