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

January 22, 2022

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>

>Solution :

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>