클릭시 레이블 텍스트를 변경 하시겠습니까?

Question

그래서 CSS 만 사용하는 매우 간단한 아코디언이 있습니다. 텍스트를 변경하고 싶습니다. 세부 사항을 보려면 클릭하십시오. 다시 클릭하면 다시 볼 수 있습니다. 아무도 어떻게 할 수 있습니까? JS를 사용하지 않았다면 좋을 것입니다. 감사!

<input type="checkbox" id="checkbox-1" name="checkbox-accordion" /><label for="checkbox" style="text-align:right;">Click for details</label> 


.accordion { 
    font-size:14px; 
    border:none; 
    border-radius:10px; 
    width:790px; 
    padding:10px; 
    margin: 0 0 0 10px; 
    -moz-border-radius: 0 0 15px 15px; 
    border-radius: 0 0 15px 15px; 
    -webkit-box-shadow: 2px 2px 6px 0px rgba(148,148,148,1); 
    -moz-box-shadow: 2px 2px 6px 0px rgba(148,148,148,1); 
    box-shadow: 2px 2px 6px 0px rgba(148,148,148,1); 
    -webkit-background-clip: padding-box; 
    -moz-background-clip: padding; 
    background-clip: padding-box; 
} 
.accordion ul { 
    list-style:none; 
    margin:0; 
    padding:0;  
} 
.accordion li { 
    margin:0; 
    padding:0; 
} 
.accordion [type=radio], .accordion [type=checkbox] { 
    display:none; 
} 
.accordion label { 
    display:block; 
    font-size:16px; 
    line-height:16px; 
    background:#ffffff; 
    border:none; 
    color:#464646; 
    text-shadow:1px 1px 1px rgba(255,255,255,0.3); 
    font-weight:700; 
    cursor:pointer; 
    -webkit-transition: all .2s ease-out; 
    -moz-transition: all .2s ease-out; 
} 
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label { 

} 
.accordion .content { 
    padding:0 10px; 
    overflow:hidden; 

    -webkit-transition: all .5s ease-out; 
    -moz-transition: all .5s ease-out; 
} 
.accordion p { 
    color:#333; 
    margin:0 0 10px; 
} 


/* Vertical */ 
.vertical ul li { 
    overflow:hidden; 
    margin:0 0 1px; 
} 
.vertical ul li label { 
    padding:10px; 
} 
.vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label { 
    border-bottom:0; 
} 
.vertical ul li .content { 
    height:0px; 
    border-top:0; 
} 
.vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content { 
    height:220px; 
} 

Answer 1

당신은 사용할 수있는이 같은 내용이 의사 요소, 뭔가 후 :

input#checkbox-1:checked + label { 
    visibility: hidden; 
    position: relative; 
} 

input#checkbox-1:checked + label:after { 
    visibility: visible; 
    position: absolute; 
    left: 0; 
    top: 0; 
    content: "Close"; 
} 

이 여분의 마크 업없이하지만 IE에서 작동하지 않습니다.

<input type="checkbox" id="checkbox-2" name="checkbox-accordion" /> 
<label for="checkbox" style="text-align:right;"><span>Click for details</span></label> 

input#checkbox-2:checked + label span { 
    display: none; 
} 

input#checkbox-2:checked + label:after { 
    content: "Close"; 
} 

이 데모 http://jsfiddle.net/r292puep/3/를 참조하십시오 당신은

Answer 2

는 그냥 여부에 따라 라벨 내부 스팬의 몇 가지를 사용하고이를 표시하거나하지 CSS와 함께 라벨 내부 요소를 넣어 숨길해야합니다 체크 박스

#checkbox-1:checked + label > .on{ 
 
    display: inline; 
 
} 
 

 
#checkbox-1:checked + label > .off, 
 
#checkbox-1 + label > .on { 
 
    display: none; 
 
}

<input type="checkbox" id="checkbox-1" name="checkbox-accordion" /> 
 
<label for="checkbox" style="text-align:right;"><span class="on">I'm ON</span><span class="off">I'm OFF</span></label>

을 체크