Question 235763 in Html Question posted in
Some basic documentation can be found here.

Html – How do I display table row data and change icon when clicked?

I am trying to make the arrow toggle to display the row data when clicked. At the same time, I’d like the arrow to turn from right to down. This would all reverse when clicked again to hide the row and change the arrow back. I know the code is plain html, I’ll clean it up later for sure. My knowledge with scripts and more advanced CSS, is very limited. Thank you for any assistance.

I tried searching for the past few days, but have had minimal luck. I may be asking the question wrong when searching.

My HTML below:

<!DOCTYPE html>
<html>
<head>

<title>Breaking News</title>

</head>

<body bgcolor="#EEEEEE" link="0000FF" vlink="0000FF" alink="0000FF">

<table width="400" cellspacing="1" cellpadding="5" align="center" bgcolor="#CCCCCC" align="center">
<tr>
<td align="center" valign="middle" bgcolor="#000000" width="" colspan="7"><span style="color: #FFFFFF; font-family: Arial,Helvetica,sans-serif; font-size: 14px;"><b>Breaking News</b></span></td>
</tr><tr>
<td align="left" valign="middle" width="" bgcolor="#CCCCCC"><span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 14px;"><b>Date</b></span></td>
<td align="left" valign="middle" width="" bgcolor="#CCCCCC"><span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 14px;"><b>Subject</b></span></td>
</tr><tr>
<td align="left" valign="middle" width="" bgcolor="#FFFFFF"><span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 14px;">Aug 22, 2023 / 10:00a</span></td>
<td align="left" valign="middle" bgcolor="#FFFFFF" width=""><span style="color: #0000FF; font-family: Arial,Helvetica,sans-serif; font-size: 14px;"><span style="color: #000000; cursor: pointer;">▶</span> <a href="#">Article Name Here</a></span></td>
</tr><tr>
<td align="left" valign="middle" width="" bgcolor="#FFFFFF"><span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 14px;">Aug 22, 2023 / 9:00a</span></td>
<td align="left" valign="middle" bgcolor="#FFFFFF" width=""><span style="color: #0000FF; font-family: Arial,Helvetica,sans-serif; font-size: 14px;"><span style="color: #000000; cursor: pointer;">▼</span> <a href="#">Article Name Here</span></td>
</tr><tr>
<td align="left" valign="middle" bgcolor="#FFFFFF" width="" colspan="2">
<span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 14px;">

Content I'd like displayed when the arrow is clicked<br>

</span>
</td>
</tr><tr>
<td align="left" valign="middle" width="" bgcolor="#FFFFFF"><span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 14px;">Aug 22, 2023 / 8:00a</span></td>
<td align="left" valign="middle" bgcolor="#FFFFFF" width=""><span style="color: #0000FF; font-family: Arial,Helvetica,sans-serif; font-size: 14px;"><span style="color: #000000; cursor: pointer;">▶</span> <a href="#">Article Name Here</a></span></td>
</tr>
</table>
<br>

</body>
</html>
Tags:

3

Answers


  1. 0

    Create a div to contain all the elements you want to hide/show and give it an ID.

    <div id="myDIV">
  <--! content you want to hide/show -->
</div>

    In JS you can toggle this div’s visibility via

    // hide
document.getElementById("myDIV").style.display = "none";

// show
document.getElementbyId("myDIV").style.display = "block";


    // Call this function on button press to toggle div
function myFunction() 
{
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") 
  {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

    Reference for toggling elements

    To rotate an arrow you can use css transforms. Reference this

    transform: rotate(90deg);
    Login or Signup to reply.
  2. 0

    1-i sugggest you to use font awesome instead of emoji codes.

    2-use onclick event. <span onclick="toggleArrow()"> </span>
    for font awesome <i onclick="toggleArrow()" class="fa-solid fa-square-chevron-right"></i>

    3-define id <i id="arrow" onclick="toggleArrow()" class="fa-solid fa-square-chevron-right"></i>

    4-define your function in script tag end of body `

    function toggleArrow(){
    …
    }
    `

    5-you can change the icons by changing class of tag

    6-access to class of elements using document.getElementById("arrow").classList

    7-deleting class using document.getElementById("arrow").classList.remove()

    8-add class using document.getElementById("arrow").classList.add("anyClassName")

    9-use if condition in your function to change the class

    Login or Signup to reply.
  3. 0

    I have added the feature you wanted perfectly. Click on the first and the last icons to see the result. The required CSS and JS are given below with necessary comments:

    // getting all the spans
var span = document.querySelectorAll('span');

// Looping through the spans
for (i = 0; i < span.length; i++){
    // Checking if the span has the text content of '▶'
    if(span[i].textContent === '▶'){
        span[i].addEventListener('click', function(){
            // For changing the arrow
            this.classList.toggle('arrow');
            // For displaying and hiding the content
            this.parentNode.parentNode.parentNode.nextSibling.classList.toggle('display-none');
        })
    }
}
    /*Adding a class for toggling the arrow rotation */
.arrow{
    transform: rotate(90deg);
    display: inline-block;
}

/*Adding a class for toggling the show-hide content */
.display-none{
    display: table-row !important;
}
    <!DOCTYPE html>
<html>
<head>

<title>Breaking News</title>

</head>

<body bgcolor="#EEEEEE" link="0000FF" vlink="0000FF" alink="0000FF">

<table width="400" cellspacing="1" cellpadding="5" align="center" bgcolor="#CCCCCC" align="center">
<tr>
<td align="center" valign="middle" bgcolor="#000000" width="" colspan="7"><span style="color: #FFFFFF; font-family: Arial,Helvetica,sans-serif; font-size: 14px;"><b>Breaking News</b></span></td>
</tr><tr>
<td align="left" valign="middle" width="" bgcolor="#CCCCCC"><span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 14px;"><b>Date</b></span></td>
<td align="left" valign="middle" width="" bgcolor="#CCCCCC"><span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 14px;"><b>Subject</b></span></td>
</tr><tr>
<td align="left" valign="middle" width="" bgcolor="#FFFFFF"><span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 14px;">Aug 22, 2023 / 10:00a</span></td>
<td align="left" valign="middle" bgcolor="#FFFFFF" width=""><span style="color: #0000FF; font-family: Arial,Helvetica,sans-serif; font-size: 14px;"><span style="color: #000000; cursor: pointer;">&#9654;</span> <a href="#">Article Name Here</a></span></td>
</tr><tr style="display: none;">
<td align="left" valign="middle" bgcolor="#FFFFFF" width="" colspan="2">
<span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 14px;">

Content I'd like displayed when the arrow is clicked<br>

</span>
</td>
</tr><tr>
<td align="left" valign="middle" width="" bgcolor="#FFFFFF"><span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 14px;">Aug 22, 2023 / 9:00a</span></td>
<td align="left" valign="middle" bgcolor="#FFFFFF" width=""><span style="color: #0000FF; font-family: Arial,Helvetica,sans-serif; font-size: 14px;"><span style="color: #000000; cursor: pointer;">&#9660;</span> <a href="#">Article Name Here</span></td>
</tr><tr>
<td align="left" valign="middle" bgcolor="#FFFFFF" width="" colspan="2">
<span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 14px;">

Content I'd like displayed when the arrow is clicked<br>

</span>
</td>
</tr><tr>
<td align="left" valign="middle" width="" bgcolor="#FFFFFF"><span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 14px;">Aug 22, 2023 / 8:00a</span></td>
<td align="left" valign="middle" bgcolor="#FFFFFF" width=""><span style="color: #0000FF; font-family: Arial,Helvetica,sans-serif; font-size: 14px;"><span style="color: #000000; cursor: pointer;">&#9654;</span> <a href="#">Article Name Here</a></span></td>
</tr><tr style="display: none;">
<td align="left" valign="middle" bgcolor="#FFFFFF" width="" colspan="2">
<span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 14px;">

Content I'd like displayed when the arrow is clicked<br>

</span>
</td>
</tr>
</table>
<br>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search