Great Javascript and css Exercise for your Students

The display property specifies the display behavior of an element. The position of an element is indicated as spanning from a start tag, possibly including some child content, and is terminated by an end tag. What is an element?

In the HTML syntax, most elements are written with a start tag and an end tag, with the content in between. An HTML tag is composed of the name of the element, surrounded by angle brackets. An end tag also has a slash after the opening angle bracket, to distinguish it from the start tag. For example, a paragraph, which is represented by the p element, would be written: <p>Teaching is fun…</p>

The display property specifies the display behavior of an element. Every element on a web page is a rectangular box. The CSS display property determines how that rectangular box behaves.

An element can be accessed by using: document.getElementById(“hidethis”)

The getElementById MUST be written exactly as shown (more here Mozilla.org).

The Javascript syntax is as follows: object.style.display=”<some value here>”

Some critical display values relating to the code below are:

  • table-row
  • none

For a complete list of values, W3schools.com has the answer.

Now the HTML code of the assignment:

<html>

<head>

<script>

function toggle() {

if( document.getElementById(“hidethis”).style.display == ‘none’ )

document.getElementById(“hidethis”).style.display = ‘table-row’;

else

document.getElementById(“hidethis”).style.display = ‘none’;

}

</script>

</head>

<body>

<span onClick=”toggle();”>toggle</span><br/>

<table border=”1″>

<tr>

<td>Always visible</td>

</tr>

<tr id=”hidethis” style=”display:none;”>

<td>Hide this row</td>

</tr>

<tr>

<td>This row is always visible…</td>

</tr>

</table>

</body>

</html>

Initially, not all rows are visible. The particular row that we need to toggle is shown by default with <tr id=”hidethis” style=”display:none;“>

The Javascript function toggle() does the work for us. Yes, but what about having several rows that we would want to toggle. How can we modify this minimal HTML code to solve our problem?

To start with, we need to modify the function from

toggle()

to

toggle(row)

Every time we will call this function we need to “pass” the ID of the particular row. Then, we need to create an extra (or more) row. Insert the following code in the above axample:

<tr id=”hidethis2″ style=”display:none;”>

<td>Hide this row</td>

</tr>

Now, we need to work on the toggle(row) function’s code and incorporate the “row” argument that will be passed.

if( document.getElementById(“hidethis”+row).style.display == ‘none’ )

document.getElementById(“hidethis”+row).style.display = ‘table-row’;

else

document.getElementById(“hidethis”+row).style.display = ‘none’;

The complete code follows:

<html>

<head>

<script>

function toggle(row) {

if( document.getElementById(“hidethis”+row).style.display==’none’ )

document.getElementById(“hidethis”+row).style.display = ‘table-row’;

else

document.getElementById(“hidethis”+my_row).style.display = ‘none’;

}

</script>

</head>

<body>

<span onClick=”toggle(1);”>toggle1</span><br/>

<span onClick=”toggle(2);”>toggle2</span><br/>

<table border=”1″>

<tr>

<td>Always visible</td>

</tr>

<tr id=”hidethis1″ style=”display:none;”>

<td>Hide this 1</td>

</tr>

<tr>

<td>Always visible</td>

</tr>

<tr id=”hidethis2″ style=”display:none;”>

<td>Hide this 2</td>

</tr>

</table>

</body>

</html>

Please pay attention to the formatting in the above HTML code, specifically the indentation. Do you ask your students to format their code in a specific manner?

This entry was posted in Activity, code, Education, html, Javascript, Javascript, Lesson Plan, Master Teacher Program, MHTC, online school records, Panagiotopoulos, Software, STEM, support, training and tagged , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *