I would like to simplify my code, to use the same function, for the same class, but with only triggering the one that's being clicked on (changing the text). With plain JavaScript. I got it working now, but I know it can be simpler, and reusable, even if I were to use 100 of the same thing.
Could you help me simplify and improve the below code?
Code:
// Change the title of dropdown to show/hide
// 1. create function to change text
const changeText = function changeText() {
if (this.innerHTML == "Show details") {
this.innerHTML = "Hide details"
} else {
this.innerHTML = "Show details"
}
};
// 2. add click event on element to trigger text change
document.querySelector('summary.priceSummary').onclick = changeText;
document.querySelector('summary.priceSummary2').onclick = changeText;
document.querySelector('summary.priceSummary3').onclick = changeText;<details>
<summary class="priceSummary">Show details</summary>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</details>
<details>
<summary class="priceSummary2">Show details</summary>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</details>
<details>
<summary class="priceSummary3">Show details</summary>
<ul>
<li>test</li>
<li>test</li>
<li>`enter code here`test</li>
<li>test</li>
</ul>
</details>Just select all summary elements and iterate over them instead of selecting the priceSummary2 etcs.
for (const summary of document.querySelectorAll('summary')) {
summary.onclick = () => summary.textContent = summary.textContent =
'Show details' ? 'Hide details' : 'Show details';
}
If you have other summary elements, then give these a class name in common - eg, call them all priceSummary, and then you can do querySelectorAll('.priceSummary') instead.
Another option is to toggle a class, and have CSS rules show or hide the "Hide details" or "Show details" element appropriately.
for (const summary of document.querySelectorAll('.priceSummary')) {
summary.addEventListener('click', () => summary.classList.toggle('show'));
}.priceSummary:not(.show) > :first-child,
.priceSummary.show > :nth-child(2) {
display: none;
}<details>
<summary class="priceSummary show"><span>Show</span><span>hide</span> details</summary>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</details>
<details>
<summary class="priceSummary show"><span>Show</span><span>hide</span> details</summary>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</details>
<details>
<summary class="priceSummary show"><span>Show</span><span>hide</span> details</summary>
<ul>
<li>test</li>
<li>test</li>
<li>`enter code here`test</li>
<li>test</li>
</ul>
</details>Give all your elements the same class, then use document.querySelectorAll() and loop over them.
// Change the title of dropdown to show/hide
// 1. create function to change text
const changeText = function changeText() {
if (this.innerHTML == "Show details") {
this.innerHTML = "Hide details"
} else {
this.innerHTML = "Show details"
}
};
// 2. add click event on element to trigger text change
document.querySelectorAll('summary.priceSummary').forEach(el => el.addEventListener("click", changeText));<details>
<summary class="priceSummary">Show details</summary>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</details>
<details>
<summary class="priceSummary">Show details</summary>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</details>
<details>
<summary class="priceSummary">Show details</summary>
<ul>
<li>test</li>
<li>test</li>
<li>`enter code here`test</li>
<li>test</li>
</ul>
</details>