Question

182

Click a button to show or hide a table

rated 0 times [ 188] [ 6] / answers: 1 / hits: 69711 / 11 Years ago, fri, february 21, 2014, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

arielle

Add To Favorites

Follow

Total Points: 373

Total Questions: 105

Total Answers: 96

Location: Azerbaijan

Member since Fri, May 12, 2023

1 Year ago

answered 11 Years ago jonrened · Accepted Answer

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.