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