Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Media query: display = none/inline/block 1

Status
Not open for further replies.

PeDa

Technical User
Oct 10, 2002
227
0
0
NL
I use a media query to set the two columns of my table under each other on mobile devices:
Code:
@media screen and (max-width:610px) {td,tr {display:block;}}

One row of the table contains two radio buttons to hide or show other rows (in class "m") in the table:
Code:
<tr>
<td>Geeft u machtiging?</td>
<td>
<input type="radio" id="geenmachtiging" name="incassomachtiging" value="GeenMachtiging" onClick="hideM()" <?php if($input['incassomachtiging']=='GeenMachtiging'){echo "checked='checked'";}?>>
<label for="GeenMachtiging">Nee</label>
<input type="radio" id="machtiging" name="incassomachtiging" value="Machtiging" onClick="showM()" <?php if($input['incassomachtiging']=='Machtiging'){echo "checked='checked'";}?>>
<label for="Machtiging">Ja</label>
</td>
</tr>

Function hideM works fine:
Code:
function hideM() 
{
const collection = document.getElementsByClassName("m");
for (let i = 0; i < collection.length; i++) 
{collection[i].style.display="none";}
}

However I cannot see how to let the opposite function showM set display to either "block" or "ïnline" depending on the device type.
 
Solved:
Code:
function showM() 
	{
  	const collection = document.getElementsByClassName("m");
  	if (screen.width>610)
  		{
		for (let i = 0; i < collection.length; i++) 
			{collection[i].style.display="table-row";}
	   }
	else
  		{
		for (let i = 0; i < collection.length; i++) 
			{collection[i].style.display="block";}
	   }
	}
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top