PDA

View Full Version : Expand and Contract help and explanation needed please

Corwin
07-17-2008, 04:09 PM
hello,

ive been looking for ways to make expandeable and contracteable text in my html code. i figured simple solution that does almost what i want it to, with one exception. i cannot figure out how to modify it to fit this exception.

here is the original code and a test page with it on it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function toggleBox(id)
{
if (document.getElementById(id).style.display == "")
{
show = "none";
}
else
{
show = "";
}
document.getElementById(id).style.display = show;
}
</script>
</head>

<body>
<table><tr><td>
<a href="javascript:toggleBox(1)">Test1 </a></td><td><div id="1" style="display:none">Answer1 </div></td></tr>
<tr><td>
<a href="javascript:toggleBox(2)">Test2 </a></td><td><div id="2" style="display:none">Answer2 </div></td></tr>
<tr><td>
<a href="javascript:toggleBox(3)">Test3 </a></td><td><div id="3" style="display:none">Answer3 </div></td></tr>
<tr><td>
<a href="javascript:toggleBox(4)">Test4 </a></td><td><div id="4" style="display:none">Answer4 </div></td></tr>
</table>
</body>
</html>

http://webdev.wpcarey.asu.edu/tools/online_MBA_Dashboard/test.html

now, as you can see the test expands and contracts great, but what i would like to do is, if one is expanded and i go to expand another one i want that first oen to contract, so basically only *one* of them is ever extended at one time.

ive tried adding this line thinking ti would work, bu it didnt:

document.getelementbytagname(div).style.display == "";

i am not well versed in javascript, just getting into it recently, so any help with what i am doing wrong is greatly appreciated

thanks

-Corwin
ohgod
07-17-2008, 04:25 PM
you're looking for an accordion.

http://stickmanlabs.com/accordion/

http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/
Corwin
07-17-2008, 04:38 PM
heya, thanks, i am wondering if that would work for this webpage (the one i am working on) because it isnt all accordionated (is that a word?) only sections of it need to be expandeable/contracteable. this is an xml displayed with a xsl stylesheet (and yes it is not finished i am aware lol) .

i am pretty sure the accordion will work according to the demo on your second link, bu ti may as well make sure here before i go on to code it :)

the working expandeables are: "+checklist" "+progress summary" "general" "enrollment" "announcements/assignents"
http://webdev.wpcarey.asu.edu/tools/online_MBA_Dashboard/frontpage.xml

(ps, the inputs dont work i know, so dont bother trying to click the submit buton ;p )

thanks again,

-Corwin

pps, while i am here i may as well as, how do i get the + to change to - and back again when expanded/contracted? i dont know how to change a specific area/section of text with jscript
ohgod
07-17-2008, 04:47 PM
you get the + to change to a - using css, based on which one is active. you can even use a background image if you want.

do a view source on the demo for the second site and you'll see how it's set up. it builds everything based on the id of div's. you set up a container div and then div's inside it. so it doesn't matter what else you have on the page, so long as you have your container set up and point the js at it.

like i said, check out the source on the demo. it's pretty easy.
Corwin
07-17-2008, 06:10 PM
hmm,

if you look at

http://webdev.wpcarey.asu.edu/tools/online_MBA_Dashboard/frontpage.xml

i copied and pasted the code directly from the source code of the second site's demo for this first try just so i couldnt get it wrong, i set one div-accordian tag around my entire document, then took 2 of my expandeables and set a div accordian header on the links and div accordiancontent/child on the contents. i went to reload the page. the 2 i used where "progress summary" and "general" as you can see however they are now both just displayed in expandedand i cant contract them.
ohgod
07-17-2008, 06:12 PM
first of all, your webserver has yet to let me actually view one of your pages.


secondly, did you include the js?
Corwin
07-17-2008, 06:32 PM
ack you cannot actually view the pages? hrm maybe i can attach some, the code is too long to post without being overhwelming.
you should be able to grab the files here
http://www.public.asu.edu/~btixier/
no idea what is in that rar, the other 3 files are the ones that are currently in use (copies of them)
i think the reason the webserver wont let you see the pages is cause this web-app/form thing i am developing for the webteam at work is sposed to stay internal and not available to our students


as to the second question *blush* can i plead the 5th?
turns out the js was in the wrong folder ^ ^"" i feel like a complete moron now

i have abotu a million other questions ^ ^ if you wouldnt mind?

-right now i can only open a piece of accordion, if i click on it again to close, nothign happens
-how do i remove the animation from the accordion? ( i tried setting the time to 0, didnt do much)

sorry again, ive only ever started lookign at Jscript last week, i only know html, xml, xsl, coldfusion, and sql. . . so still trying to understand basic js.

thanks for understanding

-Corwin

ps: nevermind about the +/- , the that will be using this app lieks the highlightign btter, now i just have to hope they wont change there mins LOL

-edit2- nvm figured this out too XD
ohgod
07-17-2008, 07:25 PM
for speed: minimum value is 1.1

and since i asked about the js, did you also include the css stylesheet that came in the pack?

in there you'll find .header, which you'll want to add a background image of a plus sign (which you need to make, acquire) and align it how you want. you'll also find .selected, which you'll want to add your minus sign image same as above.

i guess for that much you could do it as text... but it seems like it would be more work

for more details on css:

http://www.w3schools.com/css/css_reference.asp