CSS로 펼치기 및 접기

Question

div의 내용을 확장하거나 축소하는 기능을 Jquery에서 만들었습니다. 하지만 지금은 라이브 jsFiddle

나는 또한 모두 제거하고자하는 이러한 것과 같은,

보기 만 CSS로 만들 또한 화살표의 이미지를 사용하고 싶습니다 이 태그는 범위를 유지하고 div 만 유지합니다.

여기 코드가 있습니다. 여기

Answer 1

.fieldsetContainer { 
 
    height: 0; 
 
    overflow: hidden; 
 
    transition: height 400ms linear; 
 
} 
 

 
#toggle { 
 
    display: none; 
 
} 
 

 
#toggle:checked ~ .fieldsetContainer { 
 
    height: 50px; 
 
} 
 

 
label .arrow-dn { display: inline-block; } 
 
label .arrow-up { display: none; } 
 

 
#toggle:checked ~ label .arrow-dn { display: none; } 
 
#toggle:checked ~ label .arrow-up { display: inline-block; }

<div class='showHide'> 
 
    <input type="checkbox" id="toggle" /> 
 
    
 
    <label for="toggle"> 
 
     <span class='expand'> 
 
      <span class="changeArrow arrow-up">↑</span> 
 
      <span class="changeArrow arrow-dn">↓</span> 
 
      Line expand and collapse 
 
     </span> 
 
    </label> 
 
    
 
    <div class="fieldsetContainer"> 
 
     <fieldset id="fdstLorem"> 
 
      Lorem ipsum... 
 
     </fieldset> 
 
    </div> 
 
</div>

은 체크 박스에 물건을에 비해 간단하고 깨끗, 나는 그것을 할 방법입니다,하지만 호버에 확장 또는 (& 보류를 클릭한다 터치에 좋습니다) ...

<style> 

.collapse-able { 
    height: 1.2rem; 
    overflow: hidden; 
} 

.collapse-able:active, .collapse-able:hover { 
    height: auto; 
} 

</style> 

와

<div class="collapse-able"> 
    <h1> The first line will always show </h1> 
    </br> 
    But what's underneath won't until hover or click and drag. Which is neat. 
</div> 

Answer 2

<div class='showHide'> 
    <span class='expand'><span id="changeArrow">&#8593;</span>Line expand and collapse</span> 
    <fieldset id="fdstLorem">Lorem ipsum...</fieldset> 
</div> 

$(document).ready(function() { 
    $('.showHide>span').click(function() { 
     $(this).next().slideToggle("slow"); 
     return false; 
    }); 
    $(".showHide>span").toggle(function() { 
     $(this).children("#changeArrow").text("↓"); 
    }, function() { 
     $(this).children("#changeArrow").text("↑"); 
    }); 
});