jQuery accordion on Wiki page only works in edit mode?

Question

I have an SP2013 wiki page that I want to use a jQuery accordion on. Just with some static content, not pulling any information from anywhere in SharePoint. I created the page, inserted a script editor web part at the top, and inserted this snippet:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
    $(function () {
        $("#accordion").accordion({collapsible: true, active: false, icons:false });
    });
</script>

Then, I put the cursor under the script editor web part, and clicked on "Edit Source". Then underneath the HTML that represents the script editor, I put this HTML (basically the jQuery accordion demo HTML):

<div id="accordion">
   <h3>
      Section 1
   </h3>
   <div>
      <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
   </div>
   <h3>
      Section 2
   </h3>
   <div>
      <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p>
   </div>
   <h3>
      Section 3
   </h3>
   <div>
      <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
   </div>
   <h3>
      Section 4
   </h3>
   <div>
      <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.</p>
      <p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
   </div>
</div>

After I saved the page, the accordion collapsed initially (as it is supposed to), but clicking on any of the headers does not expand the section. If I go back into edit mode for the page, it works as expected - clicking a header expands the section. Save it again, and it stops working.

What am I missing? I don't think what I'm trying to do is all that complicated...

EDIT 12/8: Ok, so I put the jQuery and jQuery UI scripts in the site's Site Assets folder, and the behavior is the same -- the scripts do not get loaded in IE or Firefox unless the page is in Edit mode. Incidentally I think the other script snippet, where I hook up the accordion, is also not getting loaded unless the page is in edit mode. The reason I think this is that I changed the way I referenced the main jQuery script (to something that didn't work), and the debugger halted on $(function () { ...., saying $ was undefined.

So if jQuery is not loaded, and the debugger thinks $ is undefined, at least it's hitting that section of code. Which makes me think that in non-edit mode, not only is jQuery not getting loaded, but that section of script is not getting loaded either, because the debugger is not choking on $.

Can anyone provide any insight as to why the Script Editor web part seems to be not working in IE and Firefox? (Because apparently in Chrome it works fine.)

Answer 1

Ok, solved it. The script links to the jQuery and jQuery UI files needed to have the language and type attributes set.

This did not work:

<script src='/sites/mysite/SiteAssets/Scripts/jquery-1.11.1.min.js' ></script>
<script src='/sites/mysite/SiteAssets/Scripts/jquery-ui.min.js' ></script>
<script>
    $(function () {
        $("#accordion").accordion({collapsible: true, active: false, icons:false });
    });
</script>

This works:

<script language='javascript' type='text/javascript' src='/sites/mysite/SiteAssets/Scripts/jquery-1.11.1.min.js' ></script>
<script language='javascript' type='text/javascript' src='/sites/mysite/SiteAssets/Scripts/jquery-ui.min.js' ></script>
<script>
    $(function () {
        $("#accordion").accordion({collapsible: true, active: false, icons:false });
    });
</script>

Answer 2

I wrestled w/ this same problem when we upgraded to SP2013. I was attempting it on the client side in a content editor, and thus loading the ui libraries outside of the DOM Header, and I did not have success w/ the answer above (fully referencing the script library).

The problem I discovered was a conflict with the jQuery "$" call method, as jQuery-ui also leverages "$" to invoke its functions.

I solved by using the jQuery "$.noConflict();" setup method inside of my function, which releases the "$" assignment from jQuery, and allows jQuery-ui to leverage it instead.

IMPORTANT: I did this INSIDE of my jQuery-ui function, because doing it outside lead the DOM to attempt to use jquery-ui for all remaining scripts that invoked the "$" call.

<!--CDN for CSS of DPMG OL-->
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

<!--CDN for js of DPMG OL-->
<script language="javascript" type="text/javascript" src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script>
function accordian() {
    $.noConflict();
    $("#accordion").accordion(
        {collapsible: "true", 
        heightStyle: "content", 
        active:"false"});
    };

ExecuteOrDelayUntilScriptLoaded(accordian, "sp.js");
</script>

Answer 3

What worked for me is more of a workaround, but it worked lol

I saved the code in an .html page and saved it on my site. Then called the page using an iframe on a content editor using an associated txt file (example: https://i.sstatic.net/uYTIi.png)

iFrame.txt

<div class="iframe-container">
  <iframe class="responsive-iframe" src="https://YourSharePointSiteURL/YourAccordionPage.html"></iframe>
</div>

<style>
.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
</style>

I used responsive iframe code from this page: https://www.w3schools.com/howto/howto_css_responsive_iframes.asp

I just updated the container class to iframe-container since SharePoint uses the container class as well.