How to add Accordion Panels and content dynamically using Javascript?

See more:

Javascript

SharePoint2013

Hiii, I need a help. I have an accordion created using JavaScript code inside script editor of a webpart in SharePoint site. I have created a content type with site columns, which I used in my custom list to link to my accordion.

Requirements:
1. Create accordion panels dynamically, which means when u add anything inside your list it must appear inside the accordion panels dynamically without changing your code, or if it is a new heading with its content that you add on your custom list, it must appear too inside accordion by adding a new accordion panel.

Here's my code, it adds an accordion, with a specified parameters/ headings.
A requirement is to allow your code to also add accordion headings and content from the custom list dynamically.

<link  type="text/css" rel="stylesheet" href="/Style%20Library/XSL%20Style%20Sheets/Java5.css"/>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> 
 
<script type="text/javascript">
     jQuery(document).ready(function($) {
         //Add the Web part titles for the webparts that should be displayed in the accordion
        SharePointAccordian(["About Us","Mission","Contact Us"]);
    });
    
    function SharePointAccordian(webPartTitles)
    {
    
        for(index in webPartTitles)
        {
            var title = webPartTitles[index];
            
            $("#accordian").append('<h3>'+title+'</h3>');
            $("h2.ms-webpart-titleText span:contains('"+title+"')").each(function(){
                                                                
                if ($(this).text() == title){
                                var outerDiv = $('<div></div>');
                                var outerP = $('<p></p>');
                    var innerItem = $(this).closest("span").hide().closest("[id^='MSOZoneCell_WebPart']").contents();
                    outerP.append(innerItem);
                    outerDiv.append(outerP);
                                                                                $("#accordian").append(outerDiv);
                }
            });
        }
       $("#accordian").accordion({ heightStyle: "content" });
    }
 
</script>
<div id="accordian"></div>

on my Custom list I have 5 columns: Title (Single line of text), Department (Lookup), InfoPage Type (Choice), Content-Info(Multiple lines of text) and ReadMore Text (Multiple lines of text). This list information must be inserted inside an accordion panels dynamically.