Here I have set one button, which is toggle button. If I click that button Part of my fields should be hide. If I hit again, Hidden field should be show. This is my scenario.
Here is my HTML Code:
<!-- My toggle button code is here -->
<td align="center">
<input type="button" id="viewbutton" style="width:80px;" class="button" onclick = "hide()" value="View More"/>
</td>
<!-- My headers of the table which are all hide while I hit the above button-->
<tr>
<th width='120' scope='col' id='remarks'><div align="left">Remarks</div></th>
<th width='66' scope='col' id='lan' ><div align="left">LAN Mac Address</div></th>
<th width='70' scope='col' id='wifi' ><div align="left">Wifi Mac Address</div></th>
<th width='65' scope='col' id='scrapped' ><div align="center">Scrapped date</div></th>
</tr>
<?php PopulateSystemAsset_byLocation($location_posted,$asset_type_posted,$employees_posted,"LIST") ?>
Dynamic Fields are:
function populateSystemAsset_byLocation($locations,$asset_types,$employees,$check)
{
while($fetchedquery = mysql_fetch_array($selectquery))
//Retrieve all field from Database and assigned to variable (assume)
echo "<tr>";
echo "<td align='left'>$asset_type</td>
<td align='left'>$asset_description</td>";
echo "<td align='left' id='remarks_Ans'>$Remarks</td>";
if($LAN_addr == '' || $LAN_addr == 'NULL' )
{
echo "<td align='center' id='lan_Ans'></td>";
}
else
{
echo "<td align='center' id='lan_Ans'>$LAN_addr</td>"; //Formatted Date
}
if($Wifi_addr == '' || $Wifi_addr == 'NULL' )
{
echo "<td align='center' id='wifi_Ans'></td>";
}
else
{
echo "<td align='center' id='wifi_Ans'>$Wifi_addr</td>"; //Formatted Date
}
if($asset_scrapped_date == '' || $asset_scrapped_date == '0000-00-00')
{
echo "<td align='center' id='scrapped_Ans'></td>";
}
else
{
echo "<td align='center' id='scrapped_Ans'>$ScrappedDateFormatted</td>"; //Formatted Date
}
echo "</tr>";
}//while
}//function
My Javascript code :
//Initially I Hide my fiels while page loads
<script type="application/javascript">
var flag = 0;
function hide()
{
if(flag == 0)
{
document.getElementById("viewbutton").value = "View Less";
document.getElementById("remarks").style.display = "table-cell";
document.getElementById("lan").style.display = "table-cell";
document.getElementById("wifi").style.display = "table-cell";
document.getElementById("scrapped").style.display = "table-cell";
document.getElementById("remarks_Ans").style.display = "table-cell";
document.getElementById("lan_Ans").style.display = "table-cell";
document.getElementById("wifi_Ans").style.display = "table-cell";
document.getElementById("scrapped_Ans").style.display = "table-cell";
flag = 1;
}
else
{
document.getElementById("viewbutton").value = "View More";
document.getElementById("remarks").style.display = "none";
document.getElementById("lan").style.display = "none";
document.getElementById("wifi").style.display = "none";
document.getElementById("scrapped").style.display = "none";
document.getElementById("remarks_Ans").style.display = "none";
document.getElementById("lan_Ans").style.display = "none";
document.getElementById("wifi_Ans").style.display = "none";
document.getElementById("scrapped_Ans").style.display = "none";
flag = 0;
}
}
</script>
My Problem: But my problem is only hide headers and first row fields. Remaining rows does not hide. I don't know why second and future row's columns are not hide.
Please anyone help me to solve my problem.
Change your code like this
Your PHP code
function populateSystemAsset_byLocation($locations,$asset_types,$employees,$check)
{
echo "<tr class='toggleClass'>";
// Code for td
echo "</tr>";
}//function
Now change JS
function like this
<script type="application/javascript">
var flag = 0;
function hide()
{
if(flag == 0)
{
document.getElementById("viewbutton").value = "View Less";
document.getElementsByClassName("toggleClass").style.display = "table-cell";
flag = 1;
}
else
{
document.getElementById("viewbutton").value = "View More";
document.getElementsByClassName("toggleClass").style.display = "none";
flag = 0;
}
}
</script>
As suggested, change the id to class then use something like the following to toggle the display:
// Default value for flag
var flag = true;
function showHide() {
// Toggle button label
document.getElementById("viewbutton").value = flag? 'View more' : 'View less';
// Toggle display of rows
var nodes = document.querySelectorAll('.remarks, lan, .wifi, .scrapped, .remarks_Ans, .lan_Ans, .wifi_Ans, scrapped_Ans');
for (var i=0, iLen=nodes.length; i<iLen; i++) {
nodes[i].style.display = flag? 'none' : '';
}
// Toggle the flag true/false
flag = !flag;
}
<input type="button" onclick="showHide()" id="viewbutton" value="Show less">
<table>
<tr class="remarks"><td>remarks</td></tr>
<tr class="wifi"><td>wifi</td></tr>
</table>
Note that this can also be achieved by adding or removing a class that has display:none as a rule (which is a much better option).
</div>