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>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>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>You have to add a compare instead of assignment '='
if (TextInsideLi.style.display === "block")