Expand and collapse with css

Question

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

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

I thought I could. So how could I do it at least with those arrow and removing unnecessary html? — gbvisconti, Sep 30 '14 at 12:43
look at this PURE CSS Solution: http://stackoverflow.com/questions/9100344/pure-css-multi-level-drop-down-menu — dippas, Sep 30 '14 at 12:47
@dippas that is actually quite impressive, never would have thought of it! — starvator, Sep 30 '14 at 12:49

score 14 · Accepted Answer · answered Sep 30 '14 at 12:53

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

Is there some neat way to make this work for more than one collapsable region per page? — Eric Hansander, Jul 30 '17 at 09:37

lilHar · Answer 2 · 2021-12-21T08:55:55.203

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

<style>

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

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

</style>

with

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

Expand and collapse with css

2 Answers2