javascript - HTML5 の詳細 -> 概要

Question

ここでかなり基本的な質問です。

HTML5 の DETAILS を使用していますが、SUMMARY をクリックするたびに変更できるかどうか疑問に思っていました。

つまり...

概要は「もっと見る」と表示されていますが、クリックして詳細が表示された後に「表示を減らす」ように表示する方法があるかどうか疑問に思っていました。

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

Answer 1

単純な HTML ではなく、JavaScript(JQuery) で

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

上記のコードの前に CDN にリンクするこのタグを追加することで、jquery をページに追加できます。

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

Answer 2

jqueryでこれを試してください

var clicked=false;
    $("summary").click(function(){
    if(!clicked){
   clicked=true;
    this.html("show less");
    }else{
   clicked=false;
   this.html("show more");
   }
    });

jqueryなし

       var clicked=false;
        var a=document.getElementsByTagName('summary')[0];
        a.addEventListener('click',function(){
        if(!clicked){
        clicked=true;
        a.innerHTML="show less";
       }   else{
   clicked=false;
        a.innerHTML="show more";
        }
        },false);