HTML5 세부 -> 요약

Question

아주 기본적인 질문은 여기에 있습니다.

HTML5의 세부 정보를 사용하고 있는데 요약을 클릭 할 때마다 변경 될 수 있는지 궁금합니다.

즉 ...

요약이 클릭 된 것 및 세부 사항이 표시 한 후 "덜 보여"이 표시가 할 수있는 방법이 있다면은 "더"하지만 난 궁금해서 보여줍니다.

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

Answer 1

하지 간단한 HTML뿐만 자바 스크립트 (JQuery와)없이 JQuery와

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

으로 이것을 시도하여 페이지를 thei에 링크하는이 태그를 추가하여 r 언급 된 코드 앞에 CDN이 있어야합니다.

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

Answer 2

은 당신이 jQuery를 추가 할 수 있습니다

$('summary').click(function(){ 
    if($(this).text() === 'Show more'){ 
     $(this).text('Show less'); 
    }else{ 
     $(this).text('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);