Expanding Link

[Amezis 0]

Wee... Another question:How can I make that clicking on a specific link expand to something?Well... Here's an example:I have a list with the 5 best sites:Site 1{more info}site 2{more info}etc.Clicking on {more info} for site 1, will show a description below the link, and now, site 2 will be below the description.I hope you understand my question

[round 0]

nope, not really. using what php? cause that i can help you with.
round

[Amezis 0]

I don't know about any php coding, but I could try... Isn't there a html code for that? Like dropdown-menus?

[Amezis 0]

Heh I found a good example... You can hide and show forums in Xisto. I need something like that, but default is set as hide.

[no9t9 0]

if i understand correctly, you are trying to offer more information in something like an information box when the user clicks the link.

you can do this in many different ways.

Javascript method.

<script>function display(idx) {var text=new Array;text[1]="link 1 description";text[2]="link 2 description";if (document.all) document.all['linktext'].innerHTML=text[idx];else if (document.layers) document.layers['linktext'].innerHTML=text[idx];else document.getElementById('linktext').innerHTML=text[idx]; }</script><a href=# onclick="display(1);">link1</a><a href=# onclick="display(2);">link2</a><span id=linktext>Link Description</span>

modify the descriptions or add more depending on the number of links you want. example: text[3]="another description"; and so on.

the if statement is there so that your code will work for all popular browsers.

document.all = IE
document.layers = Netscape/Opera
document.getElementId = Firefox

when calling the display function, you pass the text number. In this case, when you pick display(1); you are asking to display text[1] or the message "link 1 description".

the message will show up in between the <span> tags. Whatever you put between the <span> tags will show up when the page is loaded.

[Amezis 0]

Well, looks nice... I know there are other codes for this! post more... I will hand pick the code which is best Maybe plus in your reputation too

[no9t9 0]

how about this script. I think this is closer to what you want.Basically, you can create as many boxes as you like and put the descriptions in the boxes (DIV tags). <script>function expand(divID) {var layer="document.all", style=".style";if (document.all) layer="document.all";else if (document.layers) { layer="document.layers"; style=""; }else layer="dom";if (layer=="dom") { if (document.getElementById(divID).style.height!="1px") document.getElementById(divID).style.height="1px"; else document.getElementById(divID).style.height="100px"; }else { if (eval(layer+"[divID]"+style).height!="1px") eval(layer+"[divID]"+style).height="1px"; else eval(layer+"[divID]"+style).height="100px"; } }</script><a href=# onclick="expand('box1');">expand/collapse</a><div id="box1" style="height:100px;border:1px solid #000000;overflow:auto">Your description 1.</div><a href=# onclick="expand('box2');">expand/collapse</a><div id="box2" style="height:100px;border:1px solid #000000;overflow:auto">Your description 2.</div>I put expand/collapse there but you can make it look better by putting an up/down image there instead. You can also change the image to up or down depending on whether the box is expanded or collapsed.

[no9t9 0]

Forgot the code tags. Oh well, no edit button.Also want to note that it should work for all popular browsers like firefox, IE, netscape, opera. but i didn't test the code.just copy it and save it as an html and run it in your browser to see the results.

[Amezis 0]

Well, there is 2 things now.Firstly: No9t9, could you make that default is HIDDEN, not shown.Secondly: This is for a long list, with alot of images. So could you make it to load when you click on the "expand"-link, so the whole page don't take ages to load?

[no9t9 0]

well first, to make it hidden you just switch the numbers on the height value. where you see 100px change it to 1px and where you see 1px change it to 100px. It's really easy. Do you have any idea how to program Javascript? You should learn if you are going to be developing webpages. That way you can edit code that you find to make it suitable for your needs.

As for loading the images after clicking the button, the logic is in the first example I made. You have to use the innerHTML property. the innerHTML property physically alters the HTML dynamically. In this case, I would change the contents of the box with the innerHTML property to <img src="picture.jpg"> that would load the image.

<script>function expand(divID) {var layer="document.all", style=".style";if (document.all) layer="document.all";else if (document.layers) { layer="document.layers"; style=""; }else layer="dom";if (layer=="dom") {if (document.getElementById(divID).style.height!="100px")document.getElementById(divID).style.height="100px";else document.getElementById(divID).style.height="1px"; }else {if (eval(layer+"[divID]"+style).height!="100px") {eval(layer+"[divID]"+style).height="100px";eval(layer+"[divID]").innerHTML="<img src='picture.jpg'>Your description"; }  //added this lineelseeval(layer+"[divID]"+style).height="1px"; } }</script><a href=# onclick="expand('box1');">expand/collapse</a><div id="box1" style="height:1px;border:1px solid #000000;overflow:auto">Your description 1.</div><a href=# onclick="expand('box2');">expand/collapse</a><div id="box2" style="height:1px;border:1px solid #000000;overflow:auto">Your description 2.</div>

[Amezis 0]

Well, now it only load the"<img src='picture.jpg'>Your description" in all boxes.How can I change it?

[no9t9 0]

it works for me. I only included the Internet Explorer code for the picture part. Did you copy it correctly? Also, the code only displays one picture. there are more modifications needed in order to get more pictures.seriously, if you know absolutely nothing about javascript it will be very hard to provide you with exactly what you need. I think you should learn so you can modify it to suit your needs. Otherwise, you will always be back with changes.

[Amezis 0]

Lol yeah I think I have to learn Javascript