.acc-trigger

/*----------------------------------------------------*/
/*  Accordion
/*----------------------------------------------------*/
    (function() {

        var $container = $('.acc-container'),
            $trigger   = $('.acc-trigger');

        var fullWidth = $container.outerWidth(true);
        $container.hide();

        $trigger.first(); // .addClass('active').next().show();
                $('.acc-container.active').show();

                $trigger.css('width', fullWidth);
        $container.css('width', fullWidth);

        $trigger.on('click', function(e) {
            if( $(this).next().is(':hidden') ) {
                $trigger.removeClass('active').next().slideUp(300);
                $(this).toggleClass('active').next().slideDown(300);
            } else {
                            $trigger.removeClass('active').next().slideUp(300);
                        }
            e.preventDefault();
        });

        // Resize
        $(window).on('resize', function() {
            fullWidth = $container.outerWidth(true)
            $trigger.css('width', $trigger.parent().width() );
            $container.css('width', $container.parent().width() );
        });

    })();


To use, setup your accordion as usual.
For fully collapsed accordion, leave as-is.
To open an accordion on page load, set container .active class (e.g. <div class="acc-container active">)
Finally, I've added logic that will allow your accordion to be fully collapsible once again by clicking on them if they're already opened. This feature was not previously available.