can't use javascript to hide & show elements from list

Question

I am trying to make a collapsable li so I want to show a paragraph on clicking the li(index) i searched for a while and found that you can target the li by using onClick function and i succeeded to hide the paragraph but when after clicking again on the li(index) the paragraph not showing any more is there any one can help me?

function myfunction(li) {
  var TextInsideLi = li.getElementsByTagName('p')[0];

  if (TextInsideLi.style.display = "block") {
    TextInsideLi.style.display = "none";
  } else {
    TextInsideLi.style.display = "block";
  }
}

<ul class="questions" id="myList">
  <li class="question" onclick="myfunction(this)">
    <div class="question-header">
      <a>What types of licenses are included?</a>
      <i class="fas fa-plus"></i>
      <i class="fas fa-minus"></i>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li class="question" onclick="myfunction(this)">
    <div class="question-header">
      <a>What types of licenses are included?</a>
      <i class="fas fa-plus"></i>
      <i class="fas fa-minus"></i>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
</ul>

if(TextInsideLi.style.display = "block")must be if(TextInsideLi.style.display === "block"). You are assigning instead of comparing. — connexo
– connexo, Commented Jan 22, 2022 at 12:45
Aside from answering your question I've also covered several best practice violations your code has in my answer. Check it out to learn more than only how to fix your problem. — connexo
– connexo, Commented Jan 22, 2022 at 12:57

Ameer · Accepted Answer · 2022-01-22 12:45:42Z

The earlier answer only works on the second click of li, the answer below works on the first click.

You were doing assignment earlier in the if statement, you need to use == or another comparison operator rather than an assignment operator.

Also I check for if the display is not none rather than if it is block since initially it has neither block or none.

function myfunction(li) {
  var TextInsideLi = li.getElementsByTagName('p')[0];
  
  console.log("click");

  if (TextInsideLi.style.display !== "none") {
    TextInsideLi.style.display = "none";
  } else {
    TextInsideLi.style.display = "block";
  }
}

<ul class="questions" id="myList">
  <li class="question" onclick="myfunction(this)">
    <div class="question-header">
      <a>What types of licenses are included?</a>
      <i class="fas fa-plus"></i>
      <i class="fas fa-minus"></i>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li class="question" onclick="myfunction(this)">
    <div class="question-header">
      <a>What types of licenses are included?</a>
      <i class="fas fa-plus"></i>
      <i class="fas fa-minus"></i>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
</ul>

connexo · Accepted Answer · 2022-01-22 12:54:03Z

You are assigning instead of comparing:

if(TextInsideLi.style.display = "block")

must be

if(TextInsideLi.style.display === "block")

Also, on the initial click, your p element does not have any inline styles (which element.style checks for only). That is why in one of the answers initially you have to click twice.

I suggest you work with the existing, universal hidden API instead.

As well as avoiding inline styles, you should also try to avoid inline event listeners like onclick="...". Instead, work with addEventListener.

const questions = document.querySelectorAll('li.question');

for (const question of questions) {
  question.addEventListener('click', () => {
    const pElement = question.querySelector('p:last-child');
    pElement.hidden = !pElement.hidden; // toggles el.hidden
  });
}

<ul class="questions" id="myList">
  <li class="question" onclick="myfunction(this)">
    <div class="question-header">
      <a>What types of licenses are included?</a>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li class="question" onclick="myfunction(this)">
    <div class="question-header">
      <a>What types of licenses are included?</a>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
</ul>

prograk · Accepted Answer · 2022-01-22 12:44:51Z

0

You have to add a compare instead of assignment '='

if (TextInsideLi.style.display === "block")

answered Jan 22, 2022 at 12:44

prograk

5714 silver badges15 bronze badges

Comments

Yves-Marie Ip · Accepted Answer · 2022-01-22 12:49:08Z

0

I took your code and just made a comparison like so:

if (TextInsideLi.style.display === "block") with 3 '=' symbols.

It worked for me.

answered Jan 22, 2022 at 12:49

Yves-Marie Ip

9412 bronze badges

Collectives™ on Stack Overflow

can't use javascript to hide & show elements from list

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related