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($) {
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.