How to rename link text on click?

Question

css

Good day!
The page has long text.
It is made that part of the text is hidden, and after clicking on "Read all" it is revealed.
But I would like to rename "Read All" to "Hide" after opening the text, and after clicking on "Hide" to return the value back, i.e. "Read all".
Can you please tell me how to implement it? Thank you.

<div class="text__hidden">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est vero numquam quisquam minima libero veritatis excepturi magnam non qui, dolores maxime sit consequatur officiis dicta eveniet sunt dolore, accusantium ex.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est vero numquam quisquam minima libero veritatis excepturi magnam non qui, dolores maxime sit consequatur officiis dicta eveniet sunt dolore, accusantium ex.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est vero numquam quisquam minima libero veritatis excepturi magnam non qui, dolores maxime sit consequatur officiis dicta eveniet sunt dolore, accusantium ex.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est vero numquam quisquam minima libero veritatis excepturi magnam non qui, dolores maxime sit consequatur officiis dicta eveniet sunt dolore, accusantium ex.</p>
  <div class="toggle"></div>
</div>
<a href="#" class="toggle__btn">Читать всё</a>
</div>

.text__hidden {
    height: 250px;
    position: relative;
    overflow: hidden;
}

.text-open {
    overflow: visible;
    height: auto;
}

.text-open .toggle {
    display: none;
}

.toggle {
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 100%);
    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 100%);
    background-image: -o-linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 100%);
    background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 100%);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
a.toggle__btn
{
    border-bottom: 1px dotted currentColor;
    text-decoration: none;
    font-weight: 800;
}

$(".toggle__btn").click(function(e) {
     e.preventDefault();
     $(this).prev().toggleClass("text-open");   
 })