Click a button to show or hide a table

Question

Please see the picture attached with this question. I have four tables with me. When I click certain table name (eg Table 1), I want that table to get displayed in the right hand side. When I click on some other table name, previous one should disappear and present one should be displayed.
I know only html. So, please tell me if this can be done alone with html. If not, I am allowed to use only CSS and JavaScript (I am new to both of these and will learn if they will be helpful, depending on your answer). If this can be achieved using only these 3 languages (viz HTML, CSS and JavaScript), please tell.

Answer 1

Here is the simplest way for you to start. It gives you an easy way to follow what's going on and how things works.

Also with this solution it's easy to add a server side code (asp/php) to deal with users who has javascript disabled.

Demo: http://jsfiddle.net/DEv8z/2/

Javascript

function show(nr) {
    document.getElementById("table1").style.display="none";
    document.getElementById("table2").style.display="none";
    document.getElementById("table3").style.display="none";
    document.getElementById("table4").style.display="none";
    document.getElementById("table"+nr).style.display="block";
}

CSS

td {
    vertical-align: top;
}
#table1, #table2, #table3, #table4 {
    display: none;
}

HTML

Other things goes here ... <br /><br />

<table>
    <tr>
        <td>
            <a href="#" onclick='show(1);'>Table 1</a>
            <br />
            <a href="#" onclick='show(2);'>Table 2</a>
            <br />
            <a href="#" onclick='show(3);'>Table 3</a>
            <br />
            <a href="#" onclick='show(4);'>Table 4</a>
        </td>
        <td>
            &nbsp;
        </td>
        <td>
            <div id="table1"> Content of 1 </div>
            <div id="table2"> Content of 2 </div>
            <div id="table3"> Content of 3 </div>
            <div id="table4"> Content of 4 </div>        
        </td>
    </tr>
</table>

UPDATE

Using a file for each table would look like this:

table1.html

Other things goes here ... <br /><br />

<table>
    <tr>
        <td>
            <a href="table2.html">Table 2</a>
            <br />
            <a href="table3.html">Table 3</a>
            <br />
            <a href="table4.html">Table 4</a>
            <br />
            .....
        </td>
        <td>
            &nbsp;
        </td>
        <td>
            Content of 1
        </td>
    </tr>
</table>

-----------------------------------------------------

table2.html

Other things goes here ... <br /><br />

<table>
    <tr>
        <td>
            <a href="table1.html">Table 1</a>
            <br />
            <a href="table3.html">Table 3</a>
            <br />
            <a href="table4.html">Table 4</a>
            <br />
            .....
        </td>
        <td>
            &nbsp;
        </td>
        <td>
            Content of 2
        </td>
    </tr>
</table>

And if you can use server side includes and your "Other things...." will be the same for all tables, you can put that part in a separete file which gets injected with the each table content.

Answer 2

Try this FIDDLE

HTML :

<span id="sp1">Table 1</span>
<span id="sp2">Table 2</span>
<span id="sp3">Table 3</span>
<span id="sp4">Table 4</span>

<table border="1" id="t2">
    <tr><td>22</td></tr>
    <tr><td>22</td></tr>
</table>
<table border="1" id="t3">
    <tr><td>33</td></tr>
    <tr><td>33</td></tr>
</table>

JS :

document.getElementById('sp1').addEventListener("click",function(){
    showTable('t1');
});

document.getElementById('sp2').addEventListener("click",function(){   
    showTable('t2');
});

function showTable(table){
    var tables =['t1','t2','t3','t4'];    
    for(var i=0;i<4;i++){
        document.getElementById(tables[i]).style.display = "none";    
    }
    document.getElementById(table).style.display = "block";    
}

P.S : Since I see no effort, the styling part i'm leaving it to you.

Answer 3

Another working answer. Using HTML, CSS, JQUERY.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#tab1").hide();
$("#tab2").hide();
$("#tab3").hide();
$("#t1").click(function()
{
    $("#tab1").show();
    $("#tab2").hide();
    $("#tab3").hide();
});
$("#t2").click(function()
{
    $("#tab1").hide();
    $("#tab2").show();
    $("#tab3").hide();
});
$("#t3").click(function()
{
    $("#tab1").hide();
    $("#tab2").hide();
    $("#tab3").show();
});
});
</script> 
<style>
table
{
width:100px;
}
#tab1
{
background:red;
margin: 12px;
}
#tab2
{
background:green;
margin: 12px;
}
#tab3
{
background:blue;
margin: 12px;
}
#panel
{
width:125px;
height:80px;
border:1px solid black;
float:right;
}
#t1, #t2, #t3
{
cursor: pointer;
width:50px;
height:30px;
border:1px solid black;
}
</style>
</head>
<div>
    <div id="t1">TAB1</div>
    <div id="t2">TAB2</div>
    <div id="t3">TAB3</div>

    <div id="panel">
    <table border="1" id="tab1">
        <tr><td>TAB1</td></tr>
        <tr><td>RED</td></tr>
    </table>
    <table border="1" id="tab2">
        <tr><td>TAB2</td></tr>
        <tr><td>GREEN</td></tr>
    </table>
    <table border="1" id="tab3">
        <tr><td>TAB3</td></tr>
        <tr><td>BLUE</td></tr>
    </table>
    </div>
</div>

Answer 4

This is easy to do, but will require the use of JavaScript. It can not be done using html alone.

html without script is static.

When you add script to html you get dhtml (dynamic HTML) and you can make the rendered document change base on client interaction with the document.

Are you familiar with jsfiddle? It is a perfect tool to demonstrate this.

You will create 4 divs (or tables). You will give each an id and you will style each to be "display: none". You will create your table of contents as a list and using one of many methods, register a click event handler to the list.

The click event handler will set the display attribute of the visible div/table to none, then it will set the display attribute of the desired div/table to something other than none such as "block" or "table" and will finally store a reference to the visible div/table where it can be retrieved the next time the event handler is invoked.

Answer 5

Please try it...

<style type="text/css">

#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}

#tablist li{
list-style: none;
display: inline;
margin: 0;
}

#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}

#tablist li a:link, #tablist li a:visited{
color: navy;
}

#tablist li a.current{
background: lightyellow;
}

#tabcontentcontainer{
width: 400px;
/* Insert Optional Height definition here to give all the content a unified height */
padding: 5px;
border: 1px solid black;
}

.tabcontent{
display:none;
}

</style>

<script type="text/javascript">

/***********************************************
* Tab Content script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]

////////Stop editting////////////////

function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}

var previoustab=""

function expandcontent(cid, aobject){
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()
return false
}
else
return true
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].style.backgroundColor=initTabcolor
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
}

function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //source index of tab bar relative to other tabs
break
}
}
}

function do_onload(){
var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
collecttablinks()
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(cookiename).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
}
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload


</script>


<ul id="tablist">
<li><a href="http://www.dynamicdrive.com" class="current" onClick="return expandcontent('sc1', this)">Dynamic Drive</a></li>
<li><a href="new.htm" onClick="return expandcontent('sc2', this)" theme="#EAEAFF">What's New</a></li>
<li><a href="hot.htm" onClick="return expandcontent('sc3', this)" theme="#FFE6E6">What's Hot</a></li>
<li><a href="search.htm" onClick="return expandcontent('sc4', this)" theme="#DFFFDF">Search</a></li>
</ul>

<DIV id="tabcontentcontainer">

<div id="sc1" class="tabcontent">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />
</div>

<div id="sc2" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/new.htm">What's New</a> section to see recently added scripts to our archive.
</div>

<div id="sc3" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/hot.htm">Hot</a> section for a list of DD scripts that are popular to the visitors.
</div>

<div id="sc4" class="tabcontent">
<form action="http://www.google.com/search" method="get" onSubmit="this.q.value='site:www.dynamicdrive.com '+this.qfront.value">
<p>Search Dynamic Drive:<br />
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /></p>
</form>
</div>

</DIV>

Answer 6

You will need JavaScript to do this. I have a JSFiddle with the code below. JSFiddle is interactive and lets you play with the solution. I'm relying on a popular JavaScript framework named jQuery to make this a bit easier. You will need to load the jQuery framework into your site to get this to work. Here is the JSFiddle link: http://jsfiddle.net/sU9Pf/

Here is the code that you can run interactively in the above JSFiddle link. First some example HTML:

<table id="one" border="1"><caption>Table One</caption></table>
<table id="two" border="1"><caption>Table Two</caption></table>
<table id="three" border="1"><caption>Table Three</caption></table>
<table id="four" border="1"><caption>Table Four</caption></table>

<div id="showTableHereWhenTableIsClicked">
     <p>Click A Table To Show It Here</p>
</div>

Next is the JavaScript that makes it do what you want:

$(function() {
    $('table').on('click', function() {
        var tableClone = $.clone(this);
        var stage = $('#showTableHereWhenTableIsClicked');
        stage.prop('innerHTML', '');
        $(tableClone).appendTo(stage);
    });
});

Answer 7

You need to know javascript or jquery to do this. Here is an example with jquery considering your tables have ids

table_1
table_2
table_3
table_4

And your right side container has an id right-container

So on click event you can do like

$("[id^=table_]").click(function(){
    $("#right-container").html($(this).parent().html());
});

Answer 8

The easiest way it can be done with just HTML would require you to build 4 different pages and just link between them. If you want it to 'seem' like it is all on one page, you can use HTML iframes to make it look like your many pages are one page by loading them into the current page.

It is possible to do this in one page with just HTML and CSS, but would require really tricky CSS and the :selected selector.

The easiest way to do it in 'one page' is to use Javascript. jQuery (a javascript library) would make it even easier.