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