JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<body class="page-template-meetings">
    <div id="accordianWrapper"></div>
    <div class="bsk-pdf-category">
        <ul class="bsk-special-pdfs-container">
            <li><a href="http://llacc.miltonbayer.net/wp-content/uploads/bsk-pdf-manager/1_ANNUAL_MONITORING_REPORT_2008.PDF">Annual Monitoring Report 2008</a>

            </li>
            <li><a href="http://llacc.miltonbayer.net/wp-content/uploads/bsk-pdf-manager/2_ANNUAL_MONITORING_REPORT_2009.PDF">Annual Monitoring Report 2009</a>

            </li>
            <li><a href="http://llacc.miltonbayer.net/wp-content/uploads/bsk-pdf-manager/1_ANNUAL_MONITORING_REPORT_2008.PDF">Annual2 Monitoring Report 2008</a>

            </li>
            <li><a href="http://llacc.miltonbayer.net/wp-content/uploads/bsk-pdf-manager/3_ANNUAL_MONITORING_REPORT_2010.PDF">Annual Monitoring Report 2010</a>

            </li>
        </ul>
    </div>
</body>

CSS

.bsk-pdf-category {
    display:none;
}
#accordianWrapper {
}
#accordianWrapper h3 {
    cursor:pointer;
    margin:0;
    padding:4px 10px
}
.pane {
}
.item {
    background: url('images/file_extension_pdf.png') no-repeat left top;
    background-size: 20px;
    height: 20px;
    display: block;
    padding-left: 28px;
    margin-bottom: 15px;
}

JavaScript

jQuery(function ($) {

    function pastMeetingsSplit() {

        var currentYear = (new Date).getFullYear();
        

        for (var i = currentYear; i > 2006 - 1; i--) {

            $('#accordianWrapper').append('<h3>' + i + '</h3><div class="pane"></div>');

            $('ul.bsk-special-pdfs-container li').each(function () {

                /* Loops through UL and returns each individually*/
                var li = $(this).html();
                var n = li.indexOf(i);

                /* Returns the li which has 2008 in*/
                if (n > 0) {
                    $('#accordianWrapper .pane:last').append('<div class="item">' + li + '</div>');
                }

            });
            
        }
        
        
        $('.pane').each(function () {
            if ( $(this).is(':empty') ) {
                $(this).prev('h3').css('display','none');    
            }
        });
        

        $("#accordianWrapper div.pane").hide();

        $("#accordianWrapper h3").click(function () {
            $(this).next(".pane").slideToggle("slow").siblings(".pane:visible").slideUp("slow");
            $(this).toggleClass("current");
            $(this).siblings("h3").removeClass("current");
        });

    }

    
    
    
    if ($('body').hasClass('page-template-meetings')) {

        $('h1.entry-title').prepend('Past Meetings - ');

        pastMeetingsSplit();
    }

});