How to get css display property value in js-CodePudding

I have following html with css style and js:

<p>This is a text
  <br />
  <a ref="##" onclick="showHideBlocks('i1', 'i2')">
    <span id="i1" >(show more)</span>
  </a>
</p>
<p id="i2" >This is hidden text
  <br />
  <a ref="##" onclick="showHideBlocks('i1', 'i2')">(hide me) 
  </a>
</p>

and my css:

.show {
  display: block;
}
.hidden {
  display: none;
}

In web view: this shows like this as expected.

 This is a text
 (show more)

and here is the js function:

function showHideBlock(id) 
{
  var e = document.getElementById(id);
  var display = e.style.display;
  console.log(typeof display)
  console.log(display)
  if (display === 'block') {
    display = 'none';
  } else {
    display = 'block';
  }
  e.style.display = display;
}

function showHideBlocks(id1, id2)
{
  showHideBlock(id1);
  showHideBlock(id2);
}

First time, I click on "(show more)", the hidden block is displayed, partially as expected:

This is text
(show more)

This is hidden text
(hide me)

However, the text "(show more)" is still displayed, expected hidden! This is expected:

This is text

This is hidden text
(hide me)

Then, I click on "(hide me)", the text "(show more)" and the next paragraph are all hidden. That means the subsequently calls are working (since display are assigned by string 'block' or 'none').

This is text

I have added log message to the js function. I notice that for the first time, display is string type but value is empty!(the second line should be empty, I use "" to emphasize the empty)

string
""

How can I get its property as "block" or "none" for the first time?

Thanks @AnhPC03 for correction. But the problem is still the same. I have updated codes in the question. Actually the above codes are simplified from my project.

CodePudding user response：

UPDATED
After the author edit his post
Because in the first block, you have class instead of style="display: block;" in your span, so that you need to check if display property is presented or not. If not, get property of that class in css file using getComputedStyle method.

function showHideBlock(id) 
{
  var e = document.getElementById(id);
  var display = e.style.display;
  if (display === "") {
    let style = getComputedStyle(e);
    display = style.display;
  }
  if (display === 'block') {
    display = 'none';
  } else {
    display = 'block';
  }
  e.style.display = display;
}

function showHideBlocks(id1, id2)
{
  showHideBlock(id1);
  showHideBlock(id2);
}

CodePudding user response：

I'd suggest toggling a class. I've adjust your code to show how you can do this simply.

function showHideBlock(id) 
{
  var e = document.getElementById(id);
  
  if (e.classList.contains("hidden")) {
    e.classList.remove("hidden");
  } else {
    e.classList.add("hidden");
  }
}

function showHideBlocks(id1, id2)
{
  showHideBlock(id1);
  showHideBlock(id2);
}

.hidden {
  display: none;
}

<p>This is a text
  <br />
  <a ref="##" onclick="showHideBlocks('i1', 'i2')">
    <span id="i1" >(show more)</span>
  </a>
</p>
<p id="i2" >This is hidden text
  <br />
  <a ref="##" onclick="showHideBlocks('i1', 'i2')">(hide me) 
  </a>
</p>

CodePudding user response：

Here you go with Solution 1

    function showHideBlock(id) 
    {
      var e = document.getElementById(id);
      if (e.classList.contains("show")) {
        e.classList.remove("show");
        e.classList.add("hidden");
      } else {
        e.classList.remove("hidden");
        e.classList.add("show");
      }
    }

    function showHideBlocks(id1, id2)
    {
      showHideBlock(id1);
      showHideBlock(id2);
    }

    .show {
      display: block;
    }

    .hidden{
      display: none;
    }

    <p>This is a text
    <br />
    <a ref="##" onclick="showHideBlocks('i1', 'i2')">
      <span id="i1" >
        (show more)
      </span>
      </a></p>
    <p id="i2" >This is hidden text<br />
    <a ref="##" onclick="showHideBlocks('i1', 'i2')">(hide me)</a></p>

    <p>
    Another test with inline style.
    </p>

    <p>This is a text
    <br />
    <a ref="##" onclick="showHideBlocks('i3', 'i4')">
      <span id="i3" >
        (show more)
      </span>
      </a></p>
    <p id="i4" >This is hidden text<br />
    <a ref="##" onclick="showHideBlocks('i3', 'i4')">(hide me)</a></p>

Here you go with Solution 2

function showHideBlock(id) 
{
  document.getElementById(id).classList.toggle("hidden")
}

function showHideBlocks(id1, id2)
{
  showHideBlock(id1);
  showHideBlock(id2);
}

.hidden{
  display: none;
}

<p>This is a text
<br />
<a ref="##" onclick="showHideBlocks('i1', 'i2')">
  <span id="i1">
    (show more)
  </span>
  </a></p>
<p id="i2" >This is hidden text<br />
<a ref="##" onclick="showHideBlocks('i1', 'i2')">(hide me)</a></p>

<p>
Another test with inline style.
</p>

<p>This is a text
<br />
<a ref="##" onclick="showHideBlocks('i3', 'i4')">
  <span id="i3">
    (show more)
  </span>
  </a></p>
<p id="i4" >This is hidden text<br />
<a ref="##" onclick="showHideBlocks('i3', 'i4')">(hide me)</a></p>