JQuery UI Tabs not working in IE11 on Magento 2

Question

I'm unable to get JQuery UI Tabs to work within my magento 2 application. They work completely fine in all browsers except ie11 and below so stumped about what's going on. I'm including JQuery & JQuery UI using Require to load them into my document.

JQuery Version - 1.12.4 JQuery UI Version - v1.10.4

I've read all the current examples of fixes and implemented them, (Different doc.ready variation etc), Only IE experiencing problems.

require([
    "jquery","jquery/ui"
], function($){
        $( "#tabs" ).tabs();
        $( "#more-tabs1" ).tabs();
        $( "#more-tabs2" ).tabs();
        $( "#more-tabs3" ).tabs();
});

The JS, very basic implementation.

<div class="tabs">
    <div id="tabs">
        <ul class="ui-tabs-nav">
            <li><a href="#tabs-1">Hair</a></li>
            <li><a href="#tabs-2">Gentlemen</a></li>
            <li><a href="#tabs-3">Beauty</a></li>
        </ul>
        <div id="tabs-1">
            <div id="more-tabs1">
                <ul class="ui-tabs-nav">
                    <li><a href="#nested-tabs-1">Cut &amp; Finish</a></li>
                    <li><a href="#nested-tabs-2">Colour</a></li>
                    <li><a href="#nested-tabs-3">Conditioning</a></li>
                    <li><a href="#nested-tabs-4">Extensions</a></li>
                </ul>
                <div id="nested-tabs-1">
                    <p>Lorem Ipsum</p>
                </div>
                <div id="nested-tabs-2">
                    <p>Lorem Ipsum</p>
                </div>
                <div id="nested-tabs-3">
                    <p>Lorem Ipsum</p>
                </div>
                <div id="nested-tabs-4">
                    <p>Lorem Ipsum</p>
                </div>
            </div>
        </div>
        <div id="tabs-2">
            <div id="more-tabs2">
                <ul>
                    <li><a href="#nested-tabs-1">Grooming</a></li>
                </ul>
                <div id="nested-tabs-1">
                    <p>Lorem Ipsum</p>
                </div>
            </div>
        </div>
        <div id="tabs-3">
            <div id="more-tabs3">
                <ul>
                    <li><a href="#nested-tabs-1">Manicures &amp; Pedicures </a></li>
                    <li><a href="#nested-tabs-2">Threading </a></li>
                    <li><a href="#nested-tabs-3">Makeup &amp; Nails </a></li>
                </ul>
                <div id="nested-tabs-1">
                    <p>Coming Soon</p>
                </div>
                <div id="nested-tabs-2">
                    <p>Lorem Ipsum</p>
                </div>
                <div id="nested-tabs-3">
                    <p>Lorem Ipsum</p>
                </div>
            </div>
        </div>
    </div>
</div>

The HTML (Inside a Magento 2 Block)

Expected result is to function like the other browsers, correctly applying the tabs logic and making them clickable/work - Not getting any error messages in the console on any browser.

Sorry if things seem a bit vague it's my first post, Will supply more information if necessary