<?php
//Add to functions.php in child theme
function e_collapse_sections(){
    ?>
    <!-- Scripts and styles should enqueued properly but for the sake of having it all in one function...-->
    <script>

    if ( self !== top ) { // Check if we're in a preview window / iframe

        jQuery(document).ready(function($){

        $("<li class='elementor-editor-element-setting elementor-editor-element-collapse' title='Collapse Section'><i class='eicon-v-align-bottom' aria-hidden='true'></i><span class='elementor-screen-only'>Duplicate Section</span></li>").appendTo("#elementor ul.elementor-editor-element-settings");

        if (typeof(localStorage) == 'undefined') {
            document.getElementById("result").innerHTML =
            'Your browser does not support HTML5 localStorage. Try upgrading.';
        } else {
            $(".elementor-section").each(function(i, el) {
                if (localStorage['collapse_state' + i] == 'collapsed') {
                    $(this).addClass('collapsed');
                }
            });
        }

        $('.elementor-editor-element-collapse').on('click', function() {
            var $item = $(this).closest('.elementor-section');
            var index = $('.elementor-section').index($item);

            $item.toggleClass('collapsed');
        if ($item.hasClass('collapsed')) {
            console.log(index)
            localStorage.setItem('collapse_state' + index, 'collapsed');
        } else {
            localStorage.removeItem('collapse_state' + index);
        }
        });
        });
    }
</script>
<style>
.elementor-editor-active #elementor .elementor-section.collapsed {
    max-height: 20px;
    margin: 20px;
    overflow: hidden;
    padding: 30px 0;
    border-radius: 5px;
    transition: .5s height;
}

.elementor-editor-active #elementor .elementor-section.collapsed:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg,#41c9f4,#71d7f7);
}

.elementor-editor-active #elementor .elementor-section.collapsed ul.elementor-editor-element-settings {
    top: auto;
    bottom: 0;
    border-radius: 4px 4px;
}

</style>
<?php
}
add_action( 'wp_footer', 'e_collapse_sections' ); // Is there a better hook? I couldn't find one.