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

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  id="myList">
  <li  onclick="myfunction(this)">
    <div >
      <a>What types of licenses are included?</a>
      <i ></i>
      <i ></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  onclick="myfunction(this)">
    <div >
      <a>What types of licenses are included?</a>
      <i ></i>
      <i ></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>

CodePudding user response：

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  id="myList">
  <li  onclick="myfunction(this)">
    <div >
      <a>What types of licenses are included?</a>
      <i ></i>
      <i ></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  onclick="myfunction(this)">
    <div >
      <a>What types of licenses are included?</a>
      <i ></i>
      <i ></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>

CodePudding user response：

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  id="myList">
  <li  onclick="myfunction(this)">
    <div >
      <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  onclick="myfunction(this)">
    <div >
      <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>

CodePudding user response：

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

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

CodePudding user response：

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

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

It worked for me.