SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    shown and not shown, two table taking turn.

    Code:
    <script type=text/javascript>
    bla bla..
    </script>
    
    <table>
    <tr>
    <td>
         <a href="javascript:table1" class='bold'>table1</a>
    </td>
    <td>
        <a href="javascript:table2" class='bold'>table2</a>
    </td>
    </tr>
    
    <tr>
      <td colspan='2'>
    
    <table id='Table_1' cellpadding='0' cellspacing='0' border='0'>
    <tr>
    <td>table1</td>
    </tr>
    </table>
    
    <table id='Table_2'  cellpadding='0' cellspacing='0' border='0'  style='display: none'>
    <tr>
    <td>table2</td>
    </tr>
    </table>
        
     </td>
    <tr>
    </table>
    There are table1 and table2 inside the red colored table in the code above.

    I like to make the tables like the following.



    (1) When the page is loading table1 is shown but table2 is not shown.

    (2) If a user clicks the link table2, table2 is shown, and table1 is not shown.

    (3) If the user clicks the link table1, table1 is shown, and table2 is not shown.


    Can I make it with your help?

  2. #2
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi there,

    This should do it. Let me know if it works.

    HTML Code:
    <script type=text/javascript>
    <!--
    
    function hide_table()
    {
    document.getElementById('table1').style.display = "none";
    document.getElementById('table2').style.display = "none";
    }
    function show_table(tablediv)
    {
    hide_table();
    
    document.getElementById(tablediv).style.display = "block";
    }
    
    -->
    </script>
    
    <table>
    <tr>
    <td>
         <a href="#" onclick="show_table('table1');" class='bold'>table1</a>
    </td>
    <td>
        <a href="#" onclick="show_table('table2');" class='bold'>table2</a>
    </td>
    </tr>
    
    <tr>
      <td colspan='2'>
    
    <div id="table1" style="display:block">
    <table id='Table_1' cellpadding='0' cellspacing='0' border='0'>
    <tr>
    <td>table1</td>
    </tr>
    </table>
    </div>
    
    <div id="table2" style="display:none">
    <table id='Table_2'  cellpadding='0' cellspacing='0' border='0'  style='display: none'>
    <tr>
    <td>table2</td>
    </tr>
    </table>
    </div>
        
     </td>
    <tr>
    </table>
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you, Contrid. Your code works good, but not perfect.

    (1) When the page is loading, it shows table1, fine!

    (2) If I click the link table2, table1 is not shown, so far so good.!

    But table2 is not shown!!!

    (3) if I click the link table1, table1 is shown, cool!.

  4. #4
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The code seems fine. (i think)
    Did you copy paste that and it doesn't work?
    If you made any changes, please post your code here.

    Best, Contrid.
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  5. #5
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script type=text/javascript>
    <!--
    
    function hide_table()
    {
    document.getElementById('table1').style.display = "none";
    document.getElementById('table2').style.display = "none";
    }
    function show_table(tablediv)
    {
    hide_table();
    
    document.getElementById(tablediv).style.display = "block";
    }
    
    -->
    </script>
    
    <table>
    <tr>
    <td>
         <a href="#" onclick="show_table('table1');" class='bold'>table1</a>
    </td>
    <td>
        <a href="#" onclick="show_table('table2');" class='bold'>table2</a>
    </td>
    </tr>
    
    <tr>
      <td colspan='2'>
    
    <div id="table1" style="display:block">
    <table id='Table_1' cellpadding='0' cellspacing='0' border='0'>
    <tr>
    <td>table1</td>
    </tr>
    </table>
    </div>
    
    <div id="table2" style="display:none">
    <table id='Table_2'  cellpadding='0' cellspacing='0' border='0'  style='display: none'>
    <tr>
    <td>table2</td>
    </tr>
    </table>
    </div>
        
     </td>
    <tr>
    </table>
    [/HTML]
    I found the problem which is written in red.

    Thank you very much. Contrid

  6. #6
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If you've managed to get it to work...then GREAT!

    But I don't see how that style attribute should fit in there. (oh well...if it works now...then great. ) I didn't look at the code again though. If you have any problems, feel free to post it.
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  7. #7
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Contrid
    But I don't see how that style attribute should fit in there.
    If you move the scrollbar of the code above which I posted lastly, you can see what was the problem.(It was not your fault. the problem actually came from my code which is posted originally.)


    Quote Originally Posted by Contrid
    If you have any problems, feel free to post it.
    That's very sweet of you.


Bookmarks

Posting Permissions

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