Change toggle to close on Small Screen

Effect I want to achieve is on load to have a toggle open on larger screens and closed on smaller ones. To accomplish this I have HTML

            <div class="toggle toggle-border mar-top-10 mar-bot-10" data-state="open" >
                <div class="togglet toggleta bg-lightgrey">
                    <i class="toggle-closed icon-chevron-right"></i>
                    <i class="toggle-open icon-chevron-up"></i>
                    Filters
                </div>

Then in Jquery
$(function()
{
// colapses the toggle on small screen on page load only
if ($(document).width() < 768 ) {
$('.toggle').attr('data-state', 'closed');
}

This works excepting on the small screen on load the icon-chevron-up displays would expect the icon-chevron-right as the toggle is closed

The code is not yet live on the web but can make it available if needed

Sorry to have bothered you just watched the effect on developer console and this slight tweak worked
if ($(document).width() < 768 ) {
$('.toggle').attr('data-state', 'closed');
$('.togglet').removeClass('toggleta');
}

Thanks