How to reuse a function in JavaScript for the same class, specific to the one clicked on?

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>

Answer

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>