Merge two Expand collasp Scripts

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Merge two Expand collasp Scripts

Post 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]
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post 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>
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

count your double quotes in that link's tag..
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

I caught that after I posted but yeah, now check it out! 8)
Post Reply