Is there a way to display a html grid - html

Question

Everybody knows how a dropdown menu works where a person clicks on the drop down menu and it displays a drop down list where the user can select an option from the list. What I want to know is that is there a way in html where except displaying a dropdown list can I display a grid instead with the options in the grid? I havn't got any code for this but if anyone knows this is possible and can provide an example of this I would be very greatful and it would be very helpful.

Answer 1

Here's a basic example:
http://jsfiddle.net/QmLmC/
<!-- HTML -->
<div id="myDropdownGrid" class="dropdownGrid">
<div>
<button type="button">Open/Close</button>
</div>
<table border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<p>Click the button above to view open or close the grid.</p>
.
/* CSS */
.dropdownGrid{position:relative;}
.dropdownGrid table{position:absolute; z-index:999; display:none;}
.dropdownGrid td{width:20px; height:20px; background-color:white;}
.dropdownGrid td:hover{background-color:blue;}
.
// Javascript using jQuery
$("#myDropdownGrid button").click( function(){
$('#myDropdownGrid table').toggle();
});

Answer 2

... well, there's no such thing as a 'grid' but a table would present the info in 'grid' form. You could build a grid out of div elements, but that can get unduly tedious.
Feel like using jQuery for this?
/* make button clickable */
$("#someButton").click( function(){
/* grid like container of data, talbe or a complex div 'structure' */
$("#someGrid").toggle() // if grid is visible hide it, if hidden show it
})
... so you'd have a button with an id of "someButton" and whatever grid structure/wrapper with id id of "someGrid" and css of "display:none" on it.