Accordion

Accordion

<!-- ACCORDION BEGINS -->

// HTML

            <div class="accordion">

                <section>
                    <a href="#" class="header">
                        <div class="arrow right-arrow down-arrow"></div>&ldquo;Высший пафос&rdquo;. Часть 10</a>
                    <div class="content">
                        

                    </div>
                </section>
         </div>
         
  // SASS
  
  .accordion
    display: block
    float: left
    max-width: 750px
    width: 100%
    
    .header
        letter-spacing: 1px

.header 
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#333))
    /* Safari 5.1, Chrome 10+ */
    background: -webkit-linear-gradient(top, #666, #333)
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #666, #333)
    /* IE 10 */
    background: -ms-linear-gradient(top, #666, #333)
    /* Opera 11.10+ */
    background: -o-linear-gradient(top, #666, #333)
    /* fallback */
    background-color: #333
    background-repeat: repeat-x
    border-radius: 5px
    color: $lightblue
    display: block
    font-family: 'Roboto', sans-serif
    line-height: 30px
    padding: 0 10px 0 30px
    position: relative
    text-decoration: none

.content
    background-color: $silver
    color: $oil
    margin: 0 3px
    padding: 10px
    
    

    p
        font-family: 'Lora', serif
        font-weight: 500
        line-height: 1.5
        margin: 5px
        
        &:first-of-type
            &:first-letter
                color: $darkblue
                float: left
                font-size: 200%
                font-weight: 700
                margin-right: 3px
                margin-top: -3px
                text-shadow: 2px 2px 3px #aaa
        
        
        &:last-of-type
            color: $darkblue
            font-weight: 600
            letter-spacing: 1px
            text-align: right

.arrow
    height: 20px
    left: 10px
    position: absolute
    top: 5px
    width: 20px

.right-arrow
    border-bottom: 10px solid transparent
    border-left: 10px solid $blue
    border-top: 10px solid transparent
    height: 0
    width: 0

.down-arrow
    border-left: 10px solid transparent
    border-right: 10px solid transparent
    border-top: 10px solid $blue
    left: 6px
    top: 10px
    width: 0
    
// Javascript

//Hide all accordion content except the first one
    $(".accordion section:not(:first-child) .content").hide();
    $(document).on("click", ".accordion a.header", function () {
        var _contents = $(".accordion section .content");
        var _currentContent = $(this).parent().find(".content");
        for (var i = 0; i < _contents.length; i++) {
            var content = $(_contents[i]);
            //Only slide the element up if its not the currently selected element
            if (content[0] != _currentContent[0]) {
                content.slideUp();
                content.parent().find(".right-arrow").removeClass("down-arrow");
            }
        }
        _currentContent.slideDown();
        _currentContent.parent().find(".right-arrow").addClass("down-arrow");
    });