Displaying/Hiding table data using JavaScript

Question

I'm trying to organize all chapters and their respective topics from a book in a html table. If I add a td for each topic (from all 22 chapters) the table will get too long. I'd like to set a button inside every chapter's td, so that I can display all topics in a tr below just by clicking it.

I thought the code below would work fine, but it didn't. Any ideas? Thanks!

var t1 = document.getElementById("t1");

function TogTop() {
	if (t1.classList.contains("show") == false) {
		t1.classList.add("show");
	} else {
		t1.classList.remove("show");
	}
}

#t1 {
	display: none;
}
.show {
	display: block;
}

<table>
	<tbody>
		<tr>
			<td>[1] Data Communications, Data Networking, and the Internet <button onclick="TogTop()">Topics</button></td>
			<td>[2] Protocol Architecture, TCP/IP, and the Internet-Based Applications</td>
		</tr>
		<tr id="t1">
			<td colspan="2">
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</td>
		</tr>
		<tr>
			<td>[3] Data Transmission</td>
			<td>[4] Transmission Media</td>
		</tr>
		<tr>
			<td>[5] Signal Encoding Techniques</td>
			<td>[6] Digital Data Communication Techniques</td>
		</tr>
	</tbody>
</table>

This is due to mixing css id and class to hide and display. Use id or class for both to be consistent. Use something like .t1 { display: none;} and .show { display: block;} and <tr class="t1">` — RedPandaz
– RedPandaz, Commented Nov 2, 2018 at 2:21

Pablo Darde · Accepted Answer · 2018-11-02 02:13:16Z

The problem here is that ID have prevalence over CLASS. You can replace your t1's id with a t1's class.

var t1 = document.querySelector(".t1");
function TogTop(){
     if (!t1.classList.contains("show")){
        t1.classList.add("show");
    }else{
        t1.classList.remove("show");
    }
}

.t1{
    display: none;
}
.show{
    display: block;
}

<table>
    <tbody>
        <tr>
   <td>[1] Data Communications, Data Networking, and the Internet <button onclick="TogTop()">Topics</button></td>
  <td>[2] Protocol Architecture, TCP/IP, and the Internet-Based Applications</td>
        </tr>
        <tr id="t1" class="t1">
            <td colspan="2">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </td>
        </tr>
        <tr>
           <td>[3] Data Transmission</td>
           <td>[4] Transmission Media</td>
        </tr>
        <tr>
            <td>[5] Signal Encoding Techniques</td>
            <td>[6] Digital Data Communication Techniques</td>
        </tr>
    </tbody>
</table>

son pham · Accepted Answer · 2018-11-02 02:09:12Z

Please change css:

.show{
    display: block !important;
}

this example:

var t1 = document.getElementById("t1");
function TogTop(){
     if (t1.classList.contains("show") == false){
        t1.classList.add("show");
    }else{
        t1.classList.remove("show");
    }
}

#t1{
    display: none;
}
.show{
    display: block !important;
}

<table>
    <tbody>
        <tr>
   <td>[1] Data Communications, Data Networking, and the Internet <button onclick="TogTop()">Topics</button></td>
  <td>[2] Protocol Architecture, TCP/IP, and the Internet-Based Applications</td>
        </tr>
        <tr id="t1">
            <td colspan="2">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </td>
        </tr>
        <tr>
           <td>[3] Data Transmission</td>
           <td>[4] Transmission Media</td>
        </tr>
        <tr>
            <td>[5] Signal Encoding Techniques</td>
            <td>[6] Digital Data Communication Techniques</td>
        </tr>
    </tbody>
</table>

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

You're very close.

For table elements however you need to use another property called visibility. If you notice you also need to include the #t1 id as .show by itself won't override the #t1 style:

CSS

#t1{
  visibility: collapse;
}
#t1.show{
    visibility: visible;
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 2, 2018 at 2:19

rhys_jsk

513 bronze badges

Collectives™ on Stack Overflow

Displaying/Hiding table data using JavaScript

3 Answers 3

Comments

Comments

CSS

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

CSS

Comments

Your Answer

Sign up or log in

Post as a guest

Related