...

View Full Version : Expandable list to display text when item clicked?



gctaylor1
06-04-2009, 04:09 AM
I've got a couple of problems that I cannot figure out how to do.

1. I'm trying to create a list where clickable items are visible on a page and then when clicked they expand to read a text file and stay expanded until I click them again to collapse. I've got this partially working except when I click on the item now(machine1 for example), the item I clicked on is replaced by html/txt file(machine1_output.html). Then the links are not available unless I hit the back button in the browser. Instead I want them both displayed and I want to be able to see all the items in the list and have the items expanded too. The reason for this is I want to be able to click all the links, have them display what's in the html/text file and be able to do a CTRL+F to search for an item. Is this possible?

2. When I add a third item(machine3 below) to my list none of the items are clickable.



<script language="javascript">
var majors = new Array('machine1', 'machine2', 'machine3', 'machine4');
function toggle(a, b) {
if (!document.getElementById) return true;
if (b==1) for (var i=majors.length-1; i>=0; i--) if (majors[i] != a) document.getElementById(majors[i]).style.display='none';
a=document.getElementById(a);
a.style.display=(a.style.display=='block')?'none':'block';
return false;
}
</script>

<p class="extend"><a href="machine1_output.html" onclick="return toggle('machine1', 1);">machine1</a></p>
<ul id="machine1"></ul>

<p class="extend"><a href="machine2_output.html" onclick="return toggle('machine2', 1);">machine2</a></p>
<ul id="machine2"></ul>

<p class="extend"><a href="machine3_output.html" onclick="return toggle('machine3', 1);">machine3</a></p>
<ul id="machine3"></ul>

<p class="extend"><a href="machine4_output.html" onclick="return toggle('machine4', 1);">machine4</a></p>
<ul id="machine4"></ul>


Any clues on what I'm doing wrong?

Thank-you.

jmrker
06-04-2009, 06:45 AM
I'm not sure I understand what you are trying to do with the <a> tag href= values.
The return false will always bypass execution of the tag as a link
I put in alert messages to allow you to see what should/should not happen here. :)

You might be better with a frames version of this to display the different HTML pages. ;)

Also, your CSS was missing, so there may be some display adjustments :confused:



<html>
<head>
<title>Selected Display</title>
<script language="javascript">
// From: http://www.codingforums.com/showthread.php?t=168065

var majors = new Array('machine1', 'machine2', 'machine3', 'machine4');
function toggle(a, b) {
if (!document.getElementById) return true;
for (var i=0; i<majors.length; i++) {
if (majors[i] != a) { document.getElementById(majors[i]).style.display='none'; }
}
if (a == '') return;

a=document.getElementById(a);
a.style.display=(a.style.display=='block')?'none':'block';
// return false; // never allows on-click to go to href location
// if (a.style.display == 'none') { return true; } else { return false; }
if (a.style.display == 'block') { return true; } else { return false; }
}
</script>
</head>
<body onload="toggle('')">
<p class="extend">
<a href="javascript:alert('machine1_output.html')"
onclick="return toggle('machine1');">machine1</a>
</p>
<ul id="machine1">Machine 1</ul>

<p class="extend">
<a href="javascript:alert('machine2_output.html')"
onclick="return toggle('machine2');">machine2</a>
</p>
<ul id="machine2">Machine 2</ul>

<p class="extend">
<a href="javascript:alert('machine3_output.html')"
onclick="return toggle('machine3');">machine3</a>
</p>
<ul id="machine3">Machine 3</ul>

<p class="extend">
<a href="javascript:alert('machine4_output.html')"
onclick="return toggle('machine4');">machine4</a>
</p>
<ul id="machine4">Machine 4</ul>
</body>
</html>

Hopefully this is closer to what you want to do. :thumbsup:
Ignore suggestions if my understanding is less than stellar. :o

gctaylor1
06-04-2009, 09:59 PM
Thank-you jmrker. Sorry for the confusion in my explanation. Even without understanding fully you've managed to help me along. What I'm trying to do is have the contents of
machine1_output.html displayed where
<ul id="machine1">Machine 1</ul> is now(and remove the alert). Because inside of machine1_output.html is system configuration information about that particular machine.

So I would click on the link for machine 1 and then the link would expand and show the contents of the file called machine1_output.html and I would still be able to see the other links for machine 1, machine 2, machine 3, etc.

lavipc
06-05-2009, 01:17 AM
Hi Everybody . .:)
I am a new member and I am looking for somebody who can help me...
I'm building a new website (HTML) and customers all over Orange County will be my target.
I'm looking for a code who'll shows all the cities in Orange County, that looks like a link (for each city) - the link will take the customer to the same page, only the city name in the title will look different.

Is there anyone who knows how to do that???! :?:
This is the last peace to complete my Puzzle...
I appreciate all the help!!!
Thanks,
Lavi

jmrker
06-05-2009, 02:34 AM
...
So I would click on the link for machine 1 and then the link would expand and show the contents of the file called machine1_output.html and I would still be able to see the other links for machine 1, machine 2, machine 3, etc.

I don't think you can open another HTML page inside a <UL> or similar tag and have it do as it would normally. I have not seen this done in JS

I have seen the JS open a new window that would display the HTML.
I have seen the JS load a <frame> tag section to display the HTML.
Both have plenty of tutorials show you how to accomplish this task.

I'll keep an eye, @, open for an example of what YOU want to do.


'lavipc': You should start your own thread instead of adding nothing to the original OP's request.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum