How to load jquery accordion into div using ajax load?

I have a jquery accordion that works great on its own. When I try to load it into a div located on my homepage using the link and the download method, the accordion appears as a list with headers and loses all its functionality. My working accordion can be found at http://jsfiddle.net/jenova007/jhhpovzb/ I would like to load this accordion into the "result" div when I click on the "Save Places" link. Having made many attempts, I end up loading the original accordion page or loading the list of accordion headers and list items, but not the working accordion in the div. After reading a couple of articles on reinitializing the accordion at boot, etc., I'm still lost. Can someone explain how I can do this in my javascript? Thanks.

<script type="text/javascript"> $('a').click(function() { var page = $(this).attr('href'); $('#result').load(page); return false; }); </script> 
 <html> <head> <title>Store_Locations</title> <style type="text/css"> #result {position: absolute; top: 30%; left: 0;} </style> </head> <body> <a href="StoreListA.html">Store Locations</a> <div id="result"> </div> <script src="loader.js"></script> </body> </html> 
+5
source share
1 answer

You must initialize your accordion after loading. You must wait for the callback to load.

 $("#result").load(page + " #result", function() { // This is a callback function. Do initialization here. }); 
0
source

Source: https://habr.com/ru/post/1209036/


All Articles