jQuery Accordian dropdown (menu option) breaks when toggling between external SSI (server-side include) files

jQuery Accordian dropdown (menu option) breaks when toggling between external SSI (server-side include) files

I'm fairly new to jQuery, but understanding it theoretically.

What I'm battling with right now is with the following server-side includes and how to do the JS to either display one OR the other include within the div .

I've tried .load and also .hide, .show on the id's below, by alternating when the language icons on top of the site are clicked. I think my problem is the SSI files (which are language files - one english, the other spanish) are conflicting because of the same div id's which is "menu" (the jQuery accordion div)? I'm not sure.

my custom tag in my index.html file. Note I initally set the second div with the include in it as hidden:

  1. <head>
  2.     <script>
  3.        // THIS IS STANDARD ACCORDIAN SCRIPT FOR DROPDOWN ON HOVER
            $(function() {
               $( "#menu" ).menu();
            });
        </script>
  4. </head>
  5. <body>
  6.       <file_tabs_group>
            <div id="menuEnglish"><!--#include file="languageFiles/eng_menu.txt"--></div>
            <div id="menuSpanish" hidden=""><!--#include file="languageFiles/spanish_menu.txt"--></div>
        </file_tabs_group>
  7. </body>

My JS file:
  1. $(document).ready(function(){
    /* INITIALISE */
            $('#menuSpanish').hide();
            $('#menuEnglish').show();

    /* CLICK EVENTS ON LANGUAGE BUTTONS */
        $('#selectLangSpanish').click(function() {
            $('#menuSpanish').show();
            $('#menuEnglish').hide();
  2.         // ** I TRIED THIS TOO ** $('file_tabs_group').load( 'languageFiles/spanish_menu.txt' );
        });
        $('#selectLangEnglish').click(function() {
            $('#menuSpanish').hide();
            $('#menuEnglish').show();
  3.         // ** I TRIED THIS TOO ** $('file_tabs_group').load( 'languageFiles/eng_menu.txt' );
        });
       
    });

My SSI text file contents (eng_menu.txt). The other file same layout but in spanish (spanish_menu.txt):
  1. <ul id="menu">
          <li style="padding:0px;margin:0px;">
                <a style="background-color:none;text-decoration:none;" href="faq.html">
                    <div class="file_tab" style="width: 111px; height: 29px; background-image: url(images/faq_blank.png); background-size: auto; background-repeat: no-repeat; color: #000000; text-align: center; text-decoration: none; border: none; border-style: none;">
                        <div style="margin-top:5px;font-size:14px;font-family:texgyreadventorregular, Arial, sans-serif;">FAQ</div>
                    </div>
                </a>
            <ul>
            <li class="ui-widget-header cascade-menu-150wide" style="font-weight:normal;">Build-An-Adapter usage
                <ul class="cascade-menu-200wide">
                    <li class="ui-widget-header" style="font-weight:normal;">How do I specify a custom adapter with <strong>Build-An-Adapter</strong>?
                        <ul class="cascade-menu-250wide">
                            <li>*** TEXT GOES HERE ***</li>
                        </ul>
                    </li>
                    <li class="ui-widget-header" style="font-weight:normal;">I try to use <strong>Build-An-Adapter</strong> but nothing happens when I click "Select Devices" on the first page.
                        <ul class="cascade-menu-250wide">
                            <li>*** TEXT GOES HERE ***</li>
                        </ul>
                    </li>
                    <li class="ui-widget-header" style="font-weight:normal;">Do I need to use <strong>Build-An-Adapter</strong> to order a part?
                        <ul class="cascade-menu-250wide">
                            <li>*** TEXT GOES HERE ***</li>
                        </ul>
                    </li>
                    <li class="ui-widget-header" style="font-weight:normal;">I cannot specify the part I need with the online tool.
                        <ul class="cascade-menu-250wide">
                            <li>*** TEXT GOES HERE ***</li>
                        </ul>
                    </li>
                </ul>
            </li>
           
            <li class="ui-widget-header" style="font-weight:normal;">Adapter Effective Length
                <ul class="cascade-menu-200wide">
                    <li class="ui-widget-header" style="font-weight:normal;">What is effective length?
                        <ul class="cascade-menu-250wide">
                            <li>*** TEXT GOES HERE ***</li>
                        </ul>
                    </li>
                    <li class="ui-widget-header" style="font-weight:normal;">Do lengths and back-focus include threads?
                        <ul class="cascade-menu-250wide">
                            <li>*** TEXT GOES HERE ***</li>
                        </ul>
                    </li>
                    <li class="ui-widget-header" style="font-weight:normal;">How can I figure out the adapter length required?
                        <ul class="cascade-menu-250wide">
                            <li>*** TEXT GOES HERE ***</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
        </li>
    </ul>
I really will appreciate help with this, as my project is running late due to my battle with getting this right.

The website can be viewed here for a better idea regarding the menu dropdown (on hover) of the FAQ tab which is where the problem and jQuery accordion lays (excuse the speed of my test server): http://d-base.dyndns.biz/preciseparts Click on the spanish language icon on top and see what happens. Seems the jQuery breaks and then when english is selected again it's fine.