CMTA-Accordion BS3 JQuery-Media Page

Accordion BS3 JQuery

HTML

<div class="accordion">
     
        <div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">2015 Articles</a>

            <div id="accordion-1" class="accordion-section-content text-justify">
      <CMS:ListSummary ID="ListSummary0" runat="server" FolderID="359" DisplayXSLT="xsl/news-list.xslt" CSSClass="linklist article-container" OrderBy="datemodified" OrderByDirection="descending" />
            </div>
        </div>
        <!-- 2014 Articles -->
        <div class="accordion-section">
<a class="accordion-section-title" href="#accordion-2">2014 Articles</a>
<div id="accordion-2" class="accordion-section-content">
              <CMS:ListSummary ID="ListSummary1" runat="server" FolderID="304" DisplayXSLT="xsl/news-list.xslt" CSSClass="linklist article-container" OrderBy="datemodified" OrderByDirection="descending" />
            </div>
        </div>
        <!-- 2013 Articles -->
        <div class="accordion-section">
<a class="accordion-section-title" href="#accordion-3">2013 Articles</a>

            <div id="accordion-3" class="accordion-section-content">
<CMS:ListSummary ID="ListSummary2" runat="server" FolderID="275" DisplayXSLT="xsl/news-list.xslt" CSSClass="linklist article-container" OrderBy="datemodified" OrderByDirection="descending" />
            </div>
        </div>
    <!-- 2012 Articles -->
            <div class="accordion-section">
<a class="accordion-section-title" href="#accordion-4">2012 Articles</a>

            <div id="accordion-4" class="accordion-section-content">
<CMS:ListSummary ID="ListSummary3" runat="server" FolderID="276" DisplayXSLT="xsl/news-list.xslt" CSSClass="linklist article-container" OrderBy="datemodified" OrderByDirection="descending" />
            </div>
        </div>
    
    
    </div>

CSS

.main{margin:0 10px 10px}
.site-header-wrap {
    margin-bottom: 60px;
    border-bottom: 1px solid #cd9ad6;
}
.accordion, .accordion * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.accordion {
    overflow: hidden;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
    border-radius: 3px;
    background: #f7f7f7;
}
.accordion-section-title {
    width: 100%;
    padding: 15px;
    display: inline-block;
    border-bottom: 1px solid #1a1a1a;
    background: #333;
    transition: all linear 0.15s;
    font-size: 1.200em;
    text-shadow: 0px 1px 0px #1a1a1a;
    color: #fff;
}
.accordion-section-title.active, .accordion-section-title:hover {
    background: #4c4c4c;
    text-decoration: none;
}
.accordion-section:last-child .accordion-section-title {
    border-bottom: none;
}
.accordion-section-content {
    padding: 15px;
    display: none;
}
p{margin-bottom:20px}
h2 small {color:#fffddd;font-size:9px;}

JavaScript

jQuery(document).ready(function () {
    function close_accordion_section() {
        jQuery('.accordion .accordion-section-title').removeClass('active');
        jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
    }
    jQuery('.accordion-section-title').click(function (e) {
        var currentAttrValue = jQuery(this).attr('href');
        if (jQuery(e.target).is('.active')) {
            close_accordion_section();
        } else {
            close_accordion_section();
            jQuery(this).addClass('active');
            jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
        }
        $target =      jQuery('.accordion-section-title').parent().find('div');
          $('html, body').animate({scrollTop: $($target).offset().top}, 2000);
        e.preventDefault();
    });
});
  setTimeout(function () {
               $('.accordion-section-title:first').trigger("click") 
                 }, 777);