Show or hide a DIV

Hi everybody,

I’m new to the forum and I’m a newbie.
Im trying to hide and show after clicking on the visible part of a div table.

I wrote this function:

<script type="text/javascript">
function visualizza(idDiv)
{
  var DivToShow =idDiv; //Forse è superfluo, nell'if basta indicare idDiv

  if(DivToShow.style.display=='none')
  {
    DivToShow.style.display='block';
  }
  else
  {
    DivToShow.style.display='none';
  }
}
</script>

This is the div table structure:

<div class="pal_tabella">
        <div class="$bgcolor">
            <div class="pal_colonna">$Ora</div>
            <div class="pal_colonna">TimeZone</div>
            <div class="pal_colonnaSC">pippo</div>
            <div class="pal_colonnaST">pluto</div>
            <div class="pal_colonna">$P1</div>
            <div class="pal_colonna">$P2</div>
            <div class="pal_colonna">$P3</div>
            <div class="pal_colonna">$P4</div>
            <div class="pal_colonna">$P5</div>
            <div class="pal_colonna">$P6</div>
            <div class="pal_colonna">$P7</div>
            <div class="pal_colonna">$P8</div>
            <div class="pal_colonna">$P8</div>
            <div class="pal_colonna">$P10</div>
        </div>
        <div class="coll" id="prova">
            <div class="pal_hiddencol">prova33</div>
        </div>
      </div>

and this is the css applied to the div I want to show/hide.

.pal_hiddencol
{ 
  float: left; 
  width: 100%; 
  display: table-cell;
  border:0px dotted #333;
  display: none;
}

The point is: everything seems to work fine exept for the double click I have to do the first time to show the div.
After the first double click it works fine with one click.

Can anybody help?

vasomik

I’m not using any external library.
That part of code is in between php code and to be more precise, it’s inside an echo.

vasomik

<script type="text/javascript">
      function visualizza(idDiv)
      {
        var DivToShow =idDiv; //Forse è superfluo, nell'if basta indicare idDiv
      
        if(DivToShow.style.display=='none')
        {
          DivToShow.style.display='block';
        }
        else
        {
          DivToShow.style.display='none';
        }
      }
      </script>
      <button onclick="visualizza(prova)">test</button>
   <h1>hello world</h1><div class="pal_tabella">
    <div class="$bgcolor">
        <div class="pal_colonna">$Ora</div>
        <div class="pal_colonna">TimeZone</div>
        <div class="pal_colonnaSC">pippo</div>
        <div class="pal_colonnaST">pluto</div>
        <div class="pal_colonna">$P1</div>
        <div class="pal_colonna">$P2</div>
        <div class="pal_colonna">$P3</div>
        <div class="pal_colonna">$P4</div>
        <div class="pal_colonna">$P5</div>
        <div class="pal_colonna">$P6</div>
        <div class="pal_colonna">$P7</div>
        <div class="pal_colonna">$P8</div>
        <div class="pal_colonna">$P8</div>
        <div class="pal_colonna">$P10</div>
    </div>
    <div class="coll" id="prova">
        <div class="pal_hiddencol">prova33</div>
    </div>
  </div>
   <script>

I tested it myself its flawless i dont understand ur question?
You said its douubleclickable?

maybe something to do with your php code in there u can try

<?php $p12?>

this is an example how its done

<!DOCTYPE html>
<html>
<body>

<h1>My first PHP page</h1>

<?php
echo "Hello World!";
?>

</body>
</html>

Hi, thanks for you reply.
The problem is that as I click once nothing happens, the second time I click on the same div table hidden div gets visible as I click again it hides and so on. The point is that at first click nothing works. I’m constructing the page but I give you the url so you can have a try and understand what I mean. The URL is www.overthebet.com/overthebet 2018/. As you open the page you can see a list of football matches, make a single click on any match and see what happens at first hit (nothing) and the following click.

Hope you understand.

vasomik

If you put the following console.log statement into your function what does it show the first time vs. the second time?

<script type="text/javascript">
function visualizza(idDiv)
{
  var DivToShow =idDiv; //Forse è superfluo, nell'if basta indicare idDiv
  console.log('DivToShow.style.display = ' + DivToShow.style.display);
  if(DivToShow.style.display=='none')
  {
    DivToShow.style.display='block';
  }
  else
  {
    DivToShow.style.display='none';
  }
}

You will find, that DivToShow.style.display is a blank string. Try changing your if statement to also look for a blank string and that should solve your problem. The reason it would work the second time, is, after the first click, you function was actually setting the display to none in the else code block. On the second click the display property is ‘none’, so you change it to block and it shows.

That works, thanks a lot!!!