Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: nore/less list

  1. #1
    New to the CF scene
    Join Date
    Jun 2002
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer more/less list

    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
    Last edited by ashnarayana; 06-23-2002 at 07:42 AM.
    thank you.

  • #2
    New to the CF scene
    Join Date
    Jun 2002
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    thank you.

  • #3
    New to the CF scene
    Join Date
    Jun 2002
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ^BUMP^
    thank you.

  • #4
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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?

  • #5
    New to the CF scene
    Join Date
    Jun 2002
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thank you

    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.
    thank you.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •