Web Analytics Made Easy - StatCounter nore/less list - CodingForum

Announcement

Collapse
No announcement yet.

nore/less list

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    nore/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>

    [email protected]<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; Jun 23, 2002, 02:42 AM.
    thank you.
    Tags: None
  • #2
    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.

    Comment

    • #3
      ^BUMP^
      thank you.

      Comment

      • #4
        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?
        jasonkarldavis.com

        Comment

        • #5
          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.

          Comment

          Previous template Next
          Working...
          X