Nested Accordion with datatables

this is an example of a nested accordion with jquery ui and datatables

by Steve

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<ul class = "docsAccordion">
<li>
	<h2><a href="#">(February 19, 2013 - May 12)</a></h2>
	
	</li>
	<li>
	<h2><a href="#">(February 19, 2012 - May 11)</a></h2>
		
</li>
 <!-- element which hold Individual class in accordian -->
<li>
	<h2><a href="#">September 10, 2007</a></h2>
		
	<li>
	<h2><a href="#">(February 19, 2011 - May 10)</a></h2>
		<ul class="docsAccordion nestedElemAccor">	
				<li class = "nestedElems"> 
				<h3><a href="#">December 2001 (4 Meeting days)</a></h3>
					<ul class="insideAccor">
						<li>
						<p>gsdrfg</p>
						</li>
					</ul>
				</li>
				<li class = "nestedElems">
					<h3><a href="#">February 2002 (7 Meeting days)</a></h3>	
					
				</li>
			<li class="nestedElems">
				<h3><a href="#">November 2001 (6 meetings days)</a></h3>
					<ul class="insideAccor">
						<li>
						<ul class="insideAccorList">
							<li><a href="http://www.google.ca">Monday February 3</a></li>
							<li><a href="http://www.bing.ca">Tuesday February 4</a></li>
							<li><a href="http://www.yahoo.ca">Wednesday Februaary 5</a></li>
							<li><a href="http://www.apple.ca">Thursday February 6</a></li>
							<li><a href="http://www.sony.ca">Tuesday February 11</a></li>
						</ul>
						</li>
					</ul>
			</li>
			
		</ul>
	</li>
<!-- END element which hold Individual class in accordian -->
	<li>
	<h2><a href="#">(February 19, 2010 - May 09)</a></h2>
		
	</li>
	<li>
	<h2><a href="#"> (February 19, 2009 - May 08)</a></h2>
		
	</li>
</ul>

CSS

/*****************Nested Accordion************************/
input:focus { outline: none; }
a {
	color: #000000;
	outline: none !important;
}

ul{
margin-top:20px;
 	list-style-type: none;
	 margin: 0;
	 padding: 0;
}
.singleColumn li h2{padding-left:20px;}
.docsAccordion {
  background-color: #fbf5db;
  font-family: 'Helvetica';
  font-weight: bold;
  font-size: 1em;
	color: #000000;
}
ul.docsAccordion > li{
	border-bottom: thick solid #ffffff;
	text-align:left;
}

 /***turn off links inside the accordion h3 h2 and links***/
  ul.docsAccordion  > li a:link{
	text-decoration:none !important;
			color:#000000 !important;
}
  ul.docsAccordion > li a:hover{
		text-decoration:none;
			color:#000000;
			padding:0px;
			margin:0px;
}
  ul.docsAccordion  > li a:visited{
	text-decoration:none !important;
			color:#000000 !important;
			
}
 ul.docsAccordion  > li h2 a:hover{
	text-decoration:none !important;
			color:#000000 !important;
}
 ul.docsAccordion  > li h2 a:visited{
	text-decoration:none !important;
			color:#000000 !important;
}

.dataTable a { /***turn on links inside the datatable***/
	text-decoration:underline !important;
	}
li.nestedElems{  /*list inside accordion*/
padding-left:5px !important;
margin-left:0px !important;
	border-bottom: none;
	background-color:#ffffff;
	text-align:left;
	border: 1px solid #eee6b5;
}
ul.insideAccor > li{
	padding: 10px 0 10px 0;
	background-color: #ffffff;
	margin-bottom: 2px;
	margin-left: 0px;
	text-align: left;
	font-weight: normal;
	font-size: 1.2em;
}

table#docListTable > tbody > tr > td a:visited{
text-decoration:none !important;
color:#800080;
}
ul.insideAccorList > li{
	padding: 5px 0 5px 60px;
	background-color: #ffffff;
	margin-bottom: 2px;
	text-align: left;
	font-weight: normal;
	font-size: 1.2em;
	border-top:1px solid #eee6b5;
}
/*style links inside accordion list*/
ul.insideAccorList li a:link{
color:#0000ff !important;
text-decoration:underline !important;
}
ul.insideAccorList li a:hover{
color:#0000ff...

JavaScript

$( document ).ready(function() {
  $("ul.docsAccordion").accordion({
  	collapsible: true,
  	active: false,
  	heightStyle: "content"
  }); //end jquery ui accordion
  
var x = $("div.masthead a:first").attr('href'); //check the link in page for query string french or english
var lang = x.slice(-2);

  if (lang==='fr'){ 
//replace english with french in datatable.min.js 
var sortdn = ": Trier les résultats par ordre croissant";
var sortup = ": Trier les résultats par ordre décroissant";
var locale = "fr";
}
 $('table#docListTable').dataTable({ // table#docListTable initialize multiple tables on one page
	 "oLanguage": {
		   "oAria": {
        "sSortAscending": sortup,
        "sSortDescending": sortdn
		}
	},
"bFilter": false, //hide filter
"paging":   false, //shut off multiple paging this is not the case 
"bInfo": false //hide entry info at bottom of table
} );
});