1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 2:48 pm May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Merge two Expand collasp Scripts

Need to define two classes with ID to create toggle function...

         

JAB Creations

8:48 pm on Aug 30, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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...

Script One

<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

<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...

<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...

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

- John

Fotiman

10:37 pm on Aug 30, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I'm finding it hard to understand exactly what you're asking for, but couldn't you just create a wrapper function that calls both of the other two function? Like: 


function changeAndToggle( id, newclass ) 
{ 
  change(id, newclass); 
  toggle(id); 
}

? Or am I misunderstanding what you're asking?

garann

12:09 am on Aug 31, 2006 (gmt 0)

10+ Year Member



Like this? 


function toggle(id, classOne, classTwo)
{
identity=document.getElementById(id);
class_name = identity.className;
if (class_name.equals(classOne)) {
identity.className = classTwo;
} else {
identity.className = classOne;
}
}

JAB Creations

12:46 am on Aug 31, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



garann! The script looks and feels like it should work! However I get an error in Firefox...

Error: class_name.equals is not a function
Line: 13

Here is my test case...

<?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.equals(classOne)) {
identity.className = classTwo;
} else {
identity.className = classOne;
}
}

//]]>
</script>
<style type="text/css">
div.expand {
border: #000 solid 1px;
height: 20px;
overflow: hidden;
width: 100%;
}
div.expanded {
border: #000 solid 1px;
height: 100px;
overflow: auto;
width: 100%;
}
</style>
</head>

<body>

<a href="#" onclick="toggle('row01', 'expand','expanded');">clicky clicky</a>

<div class="expand" id="row01">
test test test test test test test
<br />
test test test test test test test
<br />
test test test test test test test
<br />
test test test test test test test
</div>

</body>
</html>

Thanks for trying Fotiman, I'm not sure where you were going with that one, changing the id?

Thanks to both of you for your help!

- John

Fotiman

2:18 am on Aug 31, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




Thanks for trying Fotiman, I'm not sure where you were going with that one, changing the id?

I'm not sure either... I copied it from your code! :-)

garann

5:06 pm on Aug 31, 2006 (gmt 0)

10+ Year Member



I may be losing my grip on things - long week. In hindsight, I'm not sure Javascript even uses equals()...

I'm guessing it should work if you substitute this test: 

if (class_name == classOne) {
...

JAB Creations

3:04 am on Sep 1, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



WOOHOO garann! Check out the two examples!

Before I continue though, the code in it's basic working form...

<?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.expand {
border: #000 solid 1px;
height: 20px;
overflow: hidden;
width: 100%;
}
div.expanded {
border: #000 solid 1px;
height: 100px;
overflow: auto;
width: 100%;
}
</style>
</head>

<body>

<a href="#" onclick="toggle('row01', 'expand','expanded');">clicky clicky</a>

<div class="expand" id="row01">
test test test test test test test
<br />
test test test test test test test
<br />
test test test test test test test
<br />
test test test test test test test
</div>

</body>
</html>

More advanced...

<?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>

- John

[edited by: JAB_Creations at 3:16 am (utc) on Sep. 1, 2006]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 2:48 pm May 14, 2026