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
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Expandable list to display text when item clicked?

    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.

    Code:
    <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.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb Suggestions ...

    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

    Code:
    <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.
    Ignore suggestions if my understanding is less than stellar.

  • Users who have thanked jmrker for this post:

    gctaylor1 (06-04-2009)

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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
    Code:
    machine1_output.html
    displayed where
    Code:
    <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.

  • #4
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question I'm looking for a code...

    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

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Arrow Will keep @@s open for you ...

    Quote Originally Posted by gctaylor1 View Post
    ...
    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.

  • Users who have thanked jmrker for this post:

    gctaylor1 (06-05-2009)


  •  

    Posting Permissions

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