PDA

View Full Version : nore/less list

ashnarayana
06-22-2002, 02:01 AM
I have this coding:

<script language="JavaScript">
function List( isOpen ) {
if (isOpen) {
document.getElementById('other').style.display = "inline";
document.getElementById('More').style.display = "none";
}
else {
document.getElementById('other').style.display = "none";
document.getElementById('More').style.display = "inline";
}}
</script>

It allows me to have a link that can be clicked to show extra info and then less when you click the other link supplied for it. I can only get this to work once. I have a list of many things and I would like to use this code or a variation of it so I can more than one instance of it.

eg; right now it does this:

yada yada
yada yada
"click here for more"

and so...

into

yada yada
yada yada
"click here for less"
blah blah
blah blah


and so...


With the code the way it is I can only do this one and all other instances will recall the first request.


Here my code from my page:

<html>
<head>
<style type="text/css">
body {background-color:rgb(235,235,235); font-family:'Arial', 'Helvetica'}
A:link {margin-left:50; text-decoration:none; color:rgb(51,102,255); font-style:normal}
A:visited {margin-left:50; text-decoration:none; color:rgb(51,102,255); font-style:normal}
A:active {text-decoration:none; color:rgb(51,102,255); font-style:normal}
A:hover {color:rgb(255,0,0); font-style:normal}
B.jpr {font-weight:bold; color:rgb(0,0,168); font-size:10pt}
div.jpr {margin-left:10; margin-top:5; font-weight:bold; color:rgb(0,0,168); font-size:10pt}
div.jpr2 {margin-left:133; margin-top:5; font-weight:bold; color:rgb(255,255,255); font-size:10pt}
div.voe {margin-left:30; margin-top:5; font-weight:bold; color:rgb(255,0,0); font-size:10pt}
</style>
</head>

<body>

<script language="JavaScript">
function List( isOpen ) {
if (isOpen) {
document.getElementById('other').style.display = "inline";
document.getElementById('More').style.display = "none";
}
else {
document.getElementById('other').style.display = "none";
document.getElementById('More').style.display = "inline";
}}
</script>

<div align="center">

<DIV class=jpr>hachi-ji</DIV><DIV class=voe>8:00</DIV>
<DIV class=jpr>9-ji</DIV><DIV class=voe>9:00</DIV>
<DIV class=jpr>hiru</DIV><DIV class=voe>noon, daytime</DIV>
<DIV class=jpr>ban</DIV><DIV class=voe>night, evening</DIV>

@<p><DIV class=jpr> 2002-nen</DIV><DIV class=voe>year 2002</DIV>
<DIV class=jpr>25-nichi</DIV><DIV class=voe>25th.</DIV>
<DIV class=jpr>6-gatsu</DIV><DIV class=voe>June</DIV>
<DIV class=jpr>kyoo</DIV><DIV class=voe>today</DIV>
<DIV class=jpr>a****a</DIV><DIV class=voe>tomorrow</DIV>
<DIV class=jpr>kon-shuu</DIV><DIV class=voe>this week</DIV>
<DIV class=jpr>rai-shuu</DIV><DIV class=voe>next week</DIV>
<DIV class=jpr>sen-shuu</DIV><DIV class=voe>last week</DIV>
<DIV class=jpr>nan-yoobi</DIV><DIV class=voe>what day</DIV>
<div id="More" style="display: inline"><a href="#more" onclick="javascript:List(true);" class="moreCat">Days of the week: * see them *<a></div><br>
<div id="other" style="display: none"><a href="#less" onclick="javascript:List(false);" class="moreCat">Days of the week: * remove them *<a><div><br>
<DIV class=jpr>getsu-yoobi</DIV><DIV class=voe>Monday</DIV>
<DIV class=jpr>ka-yoobi</DIV><DIV class=voe>Tuesday</DIV>
<DIV class=jpr>sui-yoobi</DIV><DIV class=voe>Wednesday</DIV>
<DIV class=jpr>moku-yoobi</DIV><DIV class=voe>Thursday</DIV>
<DIV class=jpr>kin-yoobi</DIV><DIV class=voe>Friday</DIV>
<DIV class=jpr>do-yoobi</DIV><DIV class=voe>Saturday</DIV>
<DIV class=jpr>nichi-yoobi</DIV><DIV class=voe>Sunday</DIV></DIV></DIV>


</body>
</html>


So pretty much I want to add under the existing more/less list another one for a difrent subject. eg:


<div id="More" style="display: inline"><a href="#more2" onclick="javascript:List(true);" class="moreCat">Another : * see them *<a></div>
<div id="other" style="display: none"><a href="#less2" onclick="javascript:List(false);" class="moreCat">week: * remove them *<a><div>
<DIV class=jpr>getsu-yoobi</DIV><DIV class=voe>ka-youuuu77666iiiiiiii568</DIV></DIV></DIV>

and infinately so on....


Pretty much I need someone to help by adding to the code so you can have it perform countless instances indivdually on demand
ashnarayana
06-22-2002, 02:13 AM
here is a better example.

I want to list a link that says "Numbers: see them" before clicked and then "Numberes: remove them"

ichi ... one
ni ... two
san ... three
shi, yon ... four
go ... five
roku ... six
shichi, nana ... seven
hachi ... eight
kyuu, ku ... nine
jyuu ... ten
Jyuu-ichi ... 11
Jyuu-ni ... 12
Jyuu-san ... 13
Jyuu-shi or Jyuu-yon ... 14
Jyuu-go ... 15
Jyuu-roku ... 16
Jyuu-shichi or Jyuu-nana ... 17
Jyuu-hachi ... 18
Jyuu-kyuu or Jyuu-ku ... 19
Ni-jyuu ... 20
Ni-jyuu-ichi ... 21
San-jyuu ... 30
Yon-jyuu ... 40
Go-jyuu ... 50
Roku-jyuu ... 60
Nana-jyuu ... 70
Hachi-jyuu ... 80
Kyuu-jyuu ... 90
Hyaku ... 100
Ni-hyaku ... 200
San-byaku ... 300
Yon-hyaku ... 400
Go-hyaku ... 500
Roppyaku ... 600
Nana-hyaku ... 700
Happyaku ... 800
Kyuu-hyaku ... 900
Sen ... 1000

shown in the same fashion as my coding above allows.

The way the coding is now it only allows one use of it per page. I need to be able to use it many times
ashnarayana
06-23-2002, 07:41 AM
^BUMP^
:(
jkd
06-23-2002, 06:39 PM
If I understand what you're saying, why don't you pass a second, array, argument to the List function of your id:

function List( isOpen,idArray ) {
if (isOpen) {
document.getElementById(idArray[0]).style.display = "inline";
document.getElementById(idArray[1]).style.display = "none";
}
else {
document.getElementById(idArray[0]).style.display = "none";
document.getElementById(idArray[1]).style.display = "inline";
}}


And something like:

List(true, ['other', 'more'])

? Or did I completely misread your question?
ashnarayana
06-24-2002, 04:06 AM
yeah that is what I wanted. I didn't know the array part. Thanks. here is what I was working on. needs more work tho.

http://home.earthlink.net/~ashnarayana/index.htm

Guess this coding would kind of answer the guy w/ the collapsable tables off of M$ site too.