CODEWITHSUNDEEP
javascripthtmlcss
richie
richie

Reputation: 197

Displaying/Hiding table data using JavaScript

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>

Upvotes: 1

Views: 65

Answers (3)

rhys_jsk
rhys_jsk

Reputation: 51

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;
}

Upvotes: 0

Pablo Darde
Pablo Darde

Reputation: 6402

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>

Upvotes: 2

son pham
son pham

Reputation: 205

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>

Upvotes: 1

Related Questions