Hello all... I can easily do one slider box on a page but I have a need for a second!!!

I have two text links (Report) and (Email)... When I click them I am trying to get the related (hidden/css) box to slide down and be available.

 

I have this working on other pages that only have 1 text link and box but two is giving me issues.

 

Trying to figure out the syntax in all the right areas...

 

Here is what I have so far:

 

css (hidden)

 

.reportBox {

display:none;

}

.emailBox {

display:none;

}

-----

HTML (text link to run javascript)

 

<td colspan="2" bgcolor="#CCCCCC"><div align="center" class="style2"><a href="#" id="reportBox" onclick="return false;" onmousedown="getValue(this.id); javascript:toggleSlideBox(' . $id . ');">Report Profile</a></div></td>

<td colspan="2" bgcolor="#CCCCCC"><div align="center" class="style2"><a href="#" id="emailBox" onclick="return false;" onmousedown="getValue(this.id); javascript:toggleSlideBox(' . $id . ');">Email</a></div></td>

 

-----

DIV Tags (to hide / unhide box)

<div class="emailBox" id=' . $id . '> </div>

 

<div class="reportBox" id=' . $id . '> </div>

 

-----

JAVASCRIPT (to make it all work)

 

function getValue(type) { **/ from href tag in html

alert(type); **/ correctly captures

}

 

function toggleSlideBox(x) {

alert(x); **/ correctly captures

if ($('#'+x).is(":hidden")) {

 

$("."+type).slideUp(200); **/ used type to determine which box to show / hide

$('#'+x).slideDown(300);

} else {

$('#'+x).slideUp(300);

}

}

 

What am I missing? I am VERY new to Javascript so... its probably there. Be gentle with me. haha

 

Thank you

 

S7mo

Okay, I wouldn't have done it in this way but I think your issue lies in the :hidden property as this refers to the CSS property visibility: hidden whereas you are hiding elements using the display: block property.

 

I would change the title tag of the element to whether or not it is shown or hidden and reference this to determine what to do next.