HTML5 Details-> Summary

Question

Pretty basic question here.

I'm using HTML5's DETAILS and I was wondering if the SUMMARY could be changed whenever it's clicked.

ie...

Summary shows "Show more" but I was wondering if there was a way to have it display "show less" after it's been clicked and the details are shown.

<details>
   <summary>Show more</summary>
   <p>Content></p>
</details>

Answer 1

Not in simple HTML but in JavaScript(JQuery)

$('summary').click(function(){
   if($(this).text() === 'Show more' ){
      $(this).text('Show less');
   }else{
      $(this).text('Show more');
   }
});

you can add jquery to your page by adding this tag that links to their CDN before the mentioned code.

<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>