this is a tool i created to generate the html code for a bootstrap collapse accordion. you can find it in: http://localhost/tools/bootstrap/bootsrap-accordion.php 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">
<title>create bootstrap accordion</title>
<script src=\"http://localhost/testscripts/javascript/ajax/jquery/jquery-1.9.1.min.js\"></script>
<script src=\"http://localhost/wallpaperama/forums/j/bootstrap-min.js\"></script>
<link href=\"http://localhost/wallpaperama/forums/s/bootstrap.3.2.0-min.css\" rel=\"stylesheet\"><script>
 $(document).ready(function() {
	 $(\'#Generate\').on(\'click\', function(){
		// $(this).hide();
		 var RawCode = $(\'#RawCode\').val();
		 //alert(PanelNums);
		 if($(\"#ShowBreaks\").is(\':checked\'))
			var BreakLines =\'\\n\';   // checked
		else
			var BreakLines =\'\';  // unchecked
		 
		 
		 var FirsPanelNoCollapse = 0; // 0 = first one
		 var RawCodeArr = RawCode.split(\'\\n\\n\'); // splits each panel
		 var CollapsedClass,ariaexpanded,CollapsedIn;
		 var code = \'<div class=\"panel-group\" id=\"accordion\" role=\"tablist\" aria-multiselectable=\"true\">\'+BreakLines+BreakLines;
	for(i=0; i< RawCodeArr.length; i++) {
		if(FirsPanelNoCollapse==i) {CollapsedClass = \'\';ariaexpanded =\'tue\';CollapsedIn =\'in\'; }
		else {CollapsedClass = \'class=\"collapsed\"\'; ariaexpanded =\'false\'; CollapsedIn =\'\';}
		CodeArr = RawCodeArr[i].split(\'\\n\')
		
		code += \'<div class=\"panel panel-default\">\'; // start panel
		code += \'<div class=\"panel-heading\" role=\"tab\" id=\"heading\'+ i +\'\"><h4 class=\"panel-title\"><a \'+CollapsedClass+\' data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse\'+ i +\'\" aria-expanded=\"\'+ariaexpanded+\'\" aria-controls=\"collapse\'+ i +\'\">\'+CodeArr[0]+\'</a></h4></div>\'; // TITLE
		code += \'<div id=\"collapse\'+ i +\'\" class=\"panel-collapse collapse \'+CollapsedIn+\'\" role=\"tabpanel\" aria-labelledby=\"heading\'+ i +\'\"><div class=\"panel-body\">\'+CodeArr[1]+\'</div></div>\';// CONTENT
		code += \'</div>\'+BreakLines+BreakLines; // END panel
	}
		code += \'</div>\'; // END class=\"panel-group\"
		
		$(\'#GeneratedCode\').text(code).select();
		$(\'#Results\').html(code)
	 });
 
 
 });
</script>
<style type=\"text/css\">
</style>
</head>

<body>

this script will create the code necessary to make accordion (collapse)<br>
http://getbootstrap.com/javascript/#collapse<hr>						
<table class=\"table table-bordered\">
<tr><td>Enter Data</td><td>OUTPUT HTML CODE</td><td>RESULTS</td></tr>
<tr>
<td style=\"width:33%;\"><textarea class=\"form-control\" style=\"height:500px;\" id=\"RawCode\" wrap=\"off\">Accordion Title
According Content (note: enter raw HTML including line breaks with <br>

Collapsible Group Item Title #1
Collapsible Group Item #1 content

Collapsible Group Item Title #2 
Collapsible Group Item #2 content

Collapsible Group Item Title #3 
Collapsible Group Item #3 content

Collapsible Group Item Title #4 
Collapsible Group Item #4 content
</textarea></td>
<td style=\"width:33%;\"><textarea class=\"form-control\" style=\"height:500px;\" id=\"GeneratedCode\" wrap=\"off\"></textarea></td>
<td style=\"width:33%;margin:10px;\"><div style=\"height:500px;overflow:auto\" id=\"Results\" ></div></td>
</tr>
<tr><td colspan=\"3\">Show Break Line in Raw HTML Code: <input type=\"checkbox\" value=\"1\" id=\"ShowBreaks\"> <br>(check if you need HTML code without any break lines. it will show all the code in one line)</td></tr>
<tr><td colspan=\"3\">Generate Bootstrap HTML Code: <input type=\"button\" value=\"Generate\" id=\"Generate\" class=\"btn btn-primary\"></td></tr>
</table>
</body>
</html

DEMO

this script will create the code necessary to make accordion (collapse)
http://getbootstrap.com/javascript/#collapse
Enter DataOUTPUT HTML CODERESULTS
Show Break Line in Raw HTML Code:
(check if you need HTML code without any break lines. it will show all the code in one line)
Generate Bootstrap HTML Code: