Web Analytics Made Easy -
StatCounter Create an expanding table within a page - CodingForum

Announcement

Collapse
No announcement yet.

Create an expanding table within a page

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Create an expanding table within a page

    Hi

    I am creating a website for a Sports Management company, and I'm currently working on the 'Clients' page - where the clients represented by the company have profiles with a photograph and some information. I would like to lay it out with the clients names, which may then be clicked on to reveal an expanding table with their information. Could this be achieved using JS? I hope somebody can shed some light on this. I'm using Dreamweaver.

    Thanks

  • #2
    Yes, can be done with js:

    Code:
    <html>
    <head>
    <title>Jump Menu 2</title>
    <script type="text/javascript">
    function show(){
    	document.getElementById('info').style.display = "block";
    }
    </script>
    <style type="text/css">
    div#info{
    	background-color: #66FFCC;
    	color: #CC0033;
    	width: 150px;
    	padding: 40px;
    	display:none;
    }
    </style>
    </head>
    <body>
    
    
    <div>
    <a style="cursor:pointer;" onclick="show();"  >Clients Name</a>
    </div>
    
    <div id="info">Info about the clients<br>is placed in this div</div>
    
    </body>
    </html>
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

    Comment


    • #3
      Originally posted by sunfighter View Post
      Yes, can be done with js:

      Code:
      <html>
      <head>
      <title>Jump Menu 2</title>
      <script type="text/javascript">
      function show(){
      	document.getElementById('info').style.display = "block";
      }
      </script>
      <style type="text/css">
      div#info{
      	background-color: #66FFCC;
      	color: #CC0033;
      	width: 150px;
      	padding: 40px;
      	display:none;
      }
      </style>
      </head>
      <body>
      
      
      <div>
      <a style="cursor:pointer;" onclick="show();"  >Clients Name</a>
      </div>
      
      <div id="info">Info about the clients<br>is placed in this div</div>
      
      </body>
      </html>
      Wow, thanks for that post - very helpful! I've implemented it into my page and it's looking good. I intend to give it some tweaks but so far so good. Just one quick problem - is there any way to collapse the table once expanded? Also - in the interest of alignment, would it be possible to insert a table within the <div>?

      Thanks

      Comment


      • #4
        Yes to both questions. Go ahead and just make a table.

        Add a button at the bottom of the div. Put it in the table if you like.
        code it:
        <input type='button' value='close' onclick='document.getElementById("info").style.display = "none";'>
        Evolution - The non-random survival of random variants.
        Physics is actually atoms trying to understand themselves.

        Comment

        Working...
        X