Page 1 of 1

Merge two Expand collasp Scripts

Posted: Wed Aug 30, 2006 3:56 pm
by JAB Creations
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


I have two perfectly working scripts that I need the functionality of both from in a single merged script. However I'm just not that handy with JavaScript to figure it out on my own.

The first script will change the class of any element you assign it to. I need to be able to use the ability to decide which ID and what class I want to change inside the html,body (not in the script like script two).

The second script allows me to toggle between styles (the first script does not allow me to toggle, it's a one time deal).

My goal posted after the scripts...

[b]Script One[/b]
[syntax="html"]<script type="text/javascript">
//<![CDATA[
function change(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}
//]]>
</script>

<div class="expand" id="row01">
<a href="#" onclick="change('row01', 'expanded');">++</a>.....<a href="#" onclick="change('row01', 'expand');">---</a>
<br />
line 2
<br />
line 3
</div>
Script Two

Code: Select all

<script type="text/javascript">
//<![CDATA[
function toggleMe(a){
 var e=document.getElementById(a);
 if(!e)return true;
 if(e.style.display=="none"){
  e.style.display="block"
 } else {
  e.style.display="none"
 }
 return true;
}
//]]>
</script>

<a href="#" onclick="return toggleMe('para1')">clicky clicky</a>
<div id="para1" ><p>Stuff stuff stuff stuff stuff.</div>
So I need to define two classes in the link along with the ID on the merged script idea. Maybe it would look something like this...

Code: Select all

<element onclick="toggle('row01', 'expanded','expanded');">
That would be exactly how I want the JavaScript event to look like. What is also great about the first script is that you can apply the function more then once which becomes excessively handy in certain situations. Example...

Code: Select all

<element onclick="toggle('row01', 'expanded','expanded'); toggle('row02', 'expanded','expanded');">

feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Thu Aug 31, 2006 10:13 pm
by JAB Creations
Check it out! :-)

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Expander</title>
<script type="text/javascript">
//<![CDATA[
function toggle(id, classOne, classTwo)
{
identity=document.getElementById(id);
class_name = identity.className;
if (class_name == classOne) { 
identity.className = classTwo;
} else {
identity.className = classOne;
}
}
//]]>
</script>
<style type="text/css">
div.expand1 {
border: #f00 solid 1px;
height: 20px;
overflow: hidden;
width: 100%;
}
div.expanded1 {
border: #f00 solid 1px;
height: 60px;
overflow: auto;
width: 100%;
}
div.expand2 {
border: #0f0 solid 1px;
height: 20px;
overflow: hidden;
width: 100%;
}
div.expanded2 {
border: #0f0 solid 1px;
height: 60px;
overflow: auto;
width: 100%;
}
div.expand3 {
border: #00f solid 1px;
height: 20px;
overflow: hidden;
width: 100%;
}
div.expanded3 {
border: #00f solid 1px;
height: 60px;
overflow: auto;
width: 100%;
}
</style>
</head>

<body>

<a href="#" onclick="toggle('row01', 'expand1','expanded1'); toggle('row02', 'expand2','expanded2'); toggle('row03', 'expand3','expanded3');" >Expand 1,2,3</a>
<br />

<br />
<a href="#" onclick="toggle('row01', 'expand1','expanded1'); toggle('row03', 'expand3','expanded3');">Expand 1,3</a>
<br />
<br />
<a href="#" onclick="toggle('row01', 'expand1','expanded1');">clicky clicky 1</a>

<div class="expand1" id="row01">
test test test test test test test 1
<br />
test test test test test test test 1
<br />
test test test test test test test 1
<br />
test test test test test test test 1
</div>

<a href="#" onclick="toggle('row02', 'expand2','expanded2');">clicky clicky 2</a>

<div class="expand2" id="row02">
test test test test test test test 2
<br />
test test test test test test test 2
<br />
test test test test test test test 2
<br />
test test test test test test test 2
</div>

<a href="#" onclick="toggle('row03', 'expand3','expanded3');">clicky clicky 3</a>

<div class="expand3" id="row03">
test test test test test test test 3
<br />
test test test test test test test 3
<br />
test test test test test test test 3
<br />
test test test test test test test 3
</div>

</body>
</html>

Posted: Thu Aug 31, 2006 10:16 pm
by feyd
count your double quotes in that link's tag..

Posted: Thu Aug 31, 2006 10:28 pm
by JAB Creations
I caught that after I posted but yeah, now check it out! 8)