CODEWITHSUNDEEP
javascripthtml
tedioustortoise
tedioustortoise

Reputation: 269

Toggle show/hide element where default on refresh is hide

My script successfully shows and hides a column in the table, I would like by default for it to be hidden and the script to reveal it.

Thanks for your help.

<a onclick="myFunction()" style="float:right;">Hide/Show</a>

<table>
<tr>
    <th>TO Date</th>
    <th id="myDIV">LDG Date</th>
    <th>TO Time</th>
    <th>LDG Time</th>
    <th>Dep. air.</th>
    <th>Arr. air.</th>
    <th></th>
</tr>
{% for l in logbook %}
<tr>
    <td>{{ l.TO_Date }}</td>
    <td id="myDIV">{{ l.LDG_Date }}</td>
    <td>{{ l.TO_time }}</td>
    <td>{{ l.LDG_time }}</td>
    <td>{{ l.dep_airport }}</td>
    <td>{{ l.arr_airport }}</td>
    <td ><a style="color:red;" href="{{ url_for('logbookdelete',id_del=l.id ) }}">Delete</a></td>
</tr>
{% endfor %}
</table>

<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "block") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

Upvotes: 1

Views: 783

Answers (3)

Fer
Fer

Reputation: 1

You can force the initial state by putting the inline style (display:none) on the tag, its not the best way but that should work.

I recommend you to make the styles on a css file separated of the html file to avoid hierarchy issues.

const x = document.getElementById('myDIV');

function toggleVisibility() {
  if (x.classList.contains('hidden')) {
    x.classList.remove('hidden');
  } else {
    x.classList.add('hidden');
  }
}

CSS file

.hidden: { 
    display: none; 
}

Upvotes: 0

Beamer
Beamer

Reputation: 828

Just add style="display: none;" to your cells:

<th class="myDIV" style="display: none;">

Notice I've changed id to class as you are not supposed to have two equal id's on the same page.

But I'd do that this way:

<style>
  .ldg-date-hidden .myDIV { display: none; }
</style>

<a onclick="myFunction()" style="float:right;">Hide/Show</a>

<table id="myTable" class="ldg-date-hidden">
<tr>
    <th>TO Date</th>
    <th class="myDIV">LDG Date</th>
    <th>TO Time</th>
    <th>LDG Time</th>
    <th>Dep. air.</th>
    <th>Arr. air.</th>
    <th></th>
</tr>
{% for l in logbook %}
<tr>
    <td>{{ l.TO_Date }}</td>
    <td class="myDIV">{{ l.LDG_Date }}</td>
    <td>{{ l.TO_time }}</td>
    <td>{{ l.LDG_time }}</td>
    <td>{{ l.dep_airport }}</td>
    <td>{{ l.arr_airport }}</td>
    <td ><a style="color:red;" href="{{ url_for('logbookdelete',id_del=l.id ) }}">Delete</a></td>
</tr>
{% endfor %}
</table>

<script>
  function myFunction() {
    document.getElementById("myTable").classList.toggle("ldg-date-hidden");  
  }
</script>

Upvotes: 2

Ashoka
Ashoka

Reputation: 101

You can hide the column by setting display:none by default and then you can do the below:

function myFunction() {
  var x = document.getElementsByClassName("myDIV");
  for(var i=0;i<x.length;i++)
  {
      if (x[i].style.display === "block") {
        x[i].style.display = "block";
      } else { 
        x[i].style.display = "none";
      }
 }
}

Upvotes: 0

Related Questions