Add Class Name To Each Link Element W/out Affecting The Accordian Menu

**NewOunce** · 02-25-2012, 02:57 PM

Hello so the problem here is every time I try to add a class name to each link element ex. golf, cricket, football it makes the CSS formatting disappear when you preview the page.

My goal is to successfully add the class name to the individual UL elements without disturbing the "accordian" menu settings.

By adding the class name my final goal is to insert the class name into the "JavaScript" code "group1" in order to place a "shuffle script" on the individual link elements so that they shuffle every time the page refreshes, with the accordian menu settings intact.

Does anybody have any idea how to work around this problem?? Any help would be greatly appreciated.

Code:

<HTML>
<HEAD>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<TITLE>Simplest Accordion Menu using jQuery - DEMO</TITLE>


<style type="text/css">
#group1{
visibility: hidden;
}
</style>

<script type="text/javascript">

/***********************************************
* Random Content Order script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

function randomizeContent(classname){
var contents=randomizeContent.collectElementbyClass(classname)
contents.text.sort(function() {return 0.5 - Math.random();})
var tbodyref=contents.ref[0].tagName=="TR"? contents.ref[0].parentNode : new Object()
for (var i=0; i<contents.ref.length; i++){
if (tbodyref.moveRow) //if IE
tbodyref.moveRow(0, Math.round(Math.random()*(tbodyref.rows.length-1)))
else
contents.ref[i].innerHTML=conte nts.text[i]
contents.ref[i].style.visibility="visible"
}
}

randomizeContent.collectElementbyClass=function(classname){ //return two arrays containing elements with specified classname, plus their innerHTML content
var classnameRE=new RegExp("(^|\\s+)"+classname+"($|\\s+)", "i") //regular expression to screen for classname within element
var contentobj=new Object()
contentobj.ref=new Array() //array containing references to the participating contents
contentobj.text=new Array() //array containing participating contents' contents (innerHTML property)
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (var i=0; i<alltags.length; i++){
if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1){
contentobj.ref[contentobj.ref.length]=alltags[i]
contentobj.text[contentobj.text.length]=alltags[i].innerHTML
}
}
return contentobj
}

</script>



<STYLE>
body, input{
	font-family: Calibri, Arial;
}
#accordion {
	list-style: none;
	padding: 0 0 0 0;
	width: 170px;
}
#accordion div {
	display: block;
	background-color: #FF9927;
	font-weight: bold;
	margin: 1px;
	cursor: pointer;
	padding: 5 5 5 7px;
	list-style: circle;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
#accordion ul {
	list-style: none;
	padding: 0 0 0 0;
}
#accordion ul{
	display: none;
}
#accordion ul li {
	font-weight: normal;
	cursor: auto;
	background-color: #fff;
	padding: 0 0 0 7px;
}
#accordion a {
	text-decoration: none;
}
#accordion a:hover {
	text-decoration: underline;
}

</STYLE>
</HEAD>


<BODY>
<H2>Simplest Accordion Menu using jQuery - Demo</H2>
<p>Click <a href="http://hotmail.com">Accordion Menu in jQuery</a></p>

<ul id="accordion">
	<li><div>Sports</div>
		<ul>
			<li><a href="#">Golf</a></li>
			<li><a href="#">Cricket</a></li>
			<li><a href="#">Football</a></li>
		</ul>
	</li>
	<li><div>Technology</div>
		<ul>
			<li><a href="#">iPhone</a></li>
			<li><a href="#">Facebook</a></li>
			<li><a href="#">Twitter</a></li>
		</ul>
	</li>
	<li><div>Latest</div>
		<ul>
			<li><a href="#">Obama</a></li>
			<li><a href="#">Iran Election</a></li>
			<li><a href="#">Health Care</a></li>
		</ul>
	</li>
</ul>

<script type="text/javascript">

//randomize order of contents with DIV id="group1"
randomizeContent("group1")

</script>


</BODY>


<SCRIPT>
$("#accordion > li > div").click(function(){

	if(false == $(this).next().is(':visible')) {
		$('#accordion ul').slideUp(300);
	}
	$(this).next().slideToggle(300);
});

$('#accordion ul:eq(0)').show();

</SCRIPT>

</HTML>

**jscheuer1** · 02-25-2012, 06:26 PM

Code:

<!DOCTYPE html>
<HTML>
<HEAD>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<TITLE>Simplest Accordion Menu using jQuery - DEMO</TITLE>

<script type="text/javascript">
$('head').append('<style title="accordion" type="text/css">.group1{visibility: hidden !important;}<\/style>');
</script>

<script type="text/javascript">

/***********************************************
* Random Content Order script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

function randomizeContent(classname){
var contents=randomizeContent.collectElementbyClass(classname)
contents.text.sort(function() {return 0.5 - Math.random();})
var tbodyref=contents.ref[0].tagName=="TR"? contents.ref[0].parentNode : new Object()
for (var i=0; i<contents.ref.length; i++){
if (tbodyref.moveRow) //if IE
tbodyref.moveRow(0, Math.round(Math.random()*(tbodyref.rows.length-1)))
else
contents.ref[i].innerHTML=contents.text[i]
contents.ref[i].style.visibility="visible"
}
}

randomizeContent.collectElementbyClass=function(classname){ //return two arrays containing elements with specified classname, plus their innerHTML content
var classnameRE=new RegExp("(^|\\s+)"+classname+"($|\\s+)", "i") //regular expression to screen for classname within element
var contentobj=new Object()
contentobj.ref=new Array() //array containing references to the participating contents
contentobj.text=new Array() //array containing participating contents' contents (innerHTML property)
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (var i=0; i<alltags.length; i++){
if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1){
contentobj.ref[contentobj.ref.length]=alltags[i]
contentobj.text[contentobj.text.length]=alltags[i].innerHTML
}
}
return contentobj
}
</script>



<STYLE>
body, input{
	font-family: Calibri, Arial;
}
#accordion {
	list-style: none;
	padding: 0 0 0 0;
	width: 170px;
}
#accordion div {
	display: block;
	background-color: #FF9927;
	font-weight: bold;
	margin: 1px;
	cursor: pointer;
	padding: 5px 5px 5px 7px;
	list-style: circle;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
#accordion ul {
	list-style: none;
	padding: 0 0 0 0;
}
#accordion ul{
	display: none;
}
#accordion ul li {
	font-weight: normal;
	cursor: auto;
	background-color: #fff;
	padding: 0 0 0 7px;
}
#accordion a {
	text-decoration: none;
}
#accordion a:hover {
	text-decoration: underline;
}

</STYLE>
</HEAD>


<BODY>
<H2>Simplest Accordion Menu using jQuery - Demo</H2>
<p>Click <a href="http://hotmail.com">Accordion Menu in jQuery</a></p>

<ul id="accordion">
	<li><div>Sports</div>
		<ul>
			<li><a href="#">Golf</a></li>
			<li><a href="#">Cricket</a></li>
			<li><a href="#">Football</a></li>
		</ul>
	</li>
	<li><div>Technology</div>
		<ul>
			<li><a href="#">iPhone</a></li>
			<li><a href="#">Facebook</a></li>
			<li><a href="#">Twitter</a></li>
		</ul>
	</li>
	<li><div>Latest</div>
		<ul>
			<li><a href="#">Obama</a></li>
			<li><a href="#">Iran Election</a></li>
			<li><a href="#">Health Care</a></li>
		</ul>
	</li>
</ul>

<script type="text/javascript">
$('#accordion').children().addClass('group1');
//randomize order of contents with DIV id="group1"
randomizeContent("group1")
</script>

<SCRIPT>
$("#accordion > li > div").click(function(){

	if(false == $(this).next().is(':visible')) {
		$('#accordion ul').slideUp(300);
	}
	$(this).next().slideToggle(300);
});

$('#accordion ul:eq(0)').show(function(){$('style[title="accordion"]').remove();});

</SCRIPT>

</BODY>
</HTML>

Thread: Add Class Name To Each Link Element W/out Affecting The Accordian Menu

Thread Tools

Search Thread

Add Class Name To Each Link Element W/out Affecting The Accordian Menu

Bookmarks

Bookmarks

Posting Permissions