使用CSS展开和折叠 [英] Expand and collapse with css
本文介绍了使用CSS展开和折叠的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在Jquery中创建了一个函数来扩展和折叠div的内容。现在,我只想使用CSS制作它,并且还使用箭头图像,像这样的箭头
I have created in Jquery one function to expand and collapse the content of a div. BUt now I would like to make it only with CSS and also use an image of an arrow, like these ones
查看实时 jsFiddle
我也想消除所有这些标签范围,只保留div及其内容
I also would like to eliminate all these tag span and keep only the div and it's content
这里是我到目前为止的代码。
Here the code I have so far.
<div class='showHide'>
<span class='expand'><span id="changeArrow">↑</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("↑");
});
});
推荐答案
.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>
这篇关于使用CSS展开和折叠的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文