Expand and collapse with css

Expand and collapse with css

Problem Description:

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

enter image description here
enter image description here

View Live jsFiddle

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>
$(document).ready(function () {
    $('.showHide>span').click(function () {
        return false;
    $(".showHide>span").toggle(function () {
    }, function () {

Solution – 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
    <div class="fieldsetContainer">
        <fieldset id="fdstLorem">
            Lorem ipsum...

Solution – 2

Here’s the way I do it, it’s simple and clean compared to doing stuff with checkboxes, but only expands on hover or click&hold (which is good for touch)…


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

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



<div class="collapse-able">
  <h1> The first line will always show </h1>
  But what's underneath won't until hover or click and drag. Which is neat.
Rate this post
We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.