I am trying to create a show/hide toggle that is used multiple times per page. I believe the script I am using is working, but I would like it to also change the text of the link being clicked from "Read More" to "Read Less".

I have tried my best to sift through several many different posts on the website, but I just can't seem to figure out the changing text part. I've tried different variations of code, but none of them seem to do both of the tasks above.

```js
function toggleRead(id) {
    var toggle = document.getElementById(id);
    if (toggle.style.display == 'block') {
        toggle.style.display = 'none';
    } else toggle.style.display = 'block';
};
```

```html
<div style="display: none;" id="post-1">
  <p><strong>Hidden</strong> text inside this div container<p>
</div>

<p><a class="question" onclick="toggleRead('post-1')">Read More</a></p>

<div style="display: none;" id="post-2">
  <p><strong>Hidden</strong> text inside this div container<p>
</div>

<p><a class="question" onclick="toggleRead('post-2')">Read More</a></p>
```

I would really appreciate it if someone could figure out how to change the text of the toggle link from "Read More" to "Read Less" and vice versa whenever it is clicked while maintaining the current functionality.