How to change <summary> text if <details> has 'open' attr

Question

If the details tag has an open attribute, the summary text will say "Close".

My attempt at changing the text:

if (jQuery("details").click().attr("open")) {
  jQuery("summary").text("Close");
} else if (jQuery("details").click().attr("")) {
  jQuery("summary").text("Show")
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<details class="description" open>
  <summary class="">Show</summary>
  <p class="">Description text</p>
</details>

Answer 1

Simply use CSS for this, here combined with a neat fading/grow/shrink effect:

details.description summary::after {
  content: attr(data-open);
  opacity: 0;
  font-size: 5px;
}

details.description[open] summary::after {
  content: attr(data-open);
  opacity: 1;
  font-size: 14px;
}

details.description summary::before {
  content: attr(data-close);
  opacity: 0;
  font-size: 5px;
}

details.description:not([open]) summary::before {
  content: attr(data-close);
  opacity: 1;
  font-size: 14px;
}

details.description summary::after,
details.description summary::before {
  display: inline-block;
  transition: all .4s ease-in-out;
  transform-origin: center bottom;
}

<details class="description" open>
  <summary data-open="Close" data-close="Show"></summary>
  <p>Description text</p>
</details>

Here's the minimal version:

details.description[open] summary::after {
  content: attr(data-open);
}

details.description:not([open]) summary::after {
  content: attr(data-close);
}

<details class="description" open>
  <summary data-open="Close" data-close="Show"></summary>
  <p>Description text</p>
</details>