用css展開和摺疊

Question

我在Jquery中創建了一個函數來展開和摺疊div的內容。但現在我想只能用CSS來使它也使用箭頭的圖像，像這樣的人

觀看現場jsFiddle

我也想消除所有這些標籤跨度和保持唯一的div和它的內容

這裏我到目前爲止的代碼。

<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("↑"); 
    }); 
}); 

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>

Answer 2

這是我做的方式，相較於複選框做的東西很簡潔乾淨，而只是擴展了懸停或點擊&保持（其對觸摸有好處）...

<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>