Wednesday, February 25, 2015

Descriptive Collapse Controls with CSS and Bootstrap

Joe Meyer, Solutions Architect

 

Bootstrap provides many useful utilities for web development. On a recent project, I leveraged the Collapse function that’s part of Bootstrap’s Javascript library, but client requirements made it necessary to extend the default behavior a little. Per the specifications, links that controlled collapsible elements included descriptive labels that indicated the element state - "Expand" to open the collapsed element and “Collapse" to close it again.

image

 

You could do this with Javascript - a few extra lines on the page and you're all set and on your merry way! Hooray! Alternatively, you could take care of the text-change AND the icon change entirely in CSS. I chose to pursue the later:

 

Let’s have  a little HTML to start us out:

HTML

<div class="row-1col">

    <div>

        <a class="toggle-collapse collapsed" data-toggle="collapse" href="#collapseExample"><span></span></a>

        <div class="collapse" id="collapseExample">

            <div>

                Mixtape pop-up Truffaut Godard irony, disrupt vegan aesthetic tattooed tousled Brooklyn direct trade bitters Vice meggings. Actually small batch pickled, sriracha fixie pork belly food truck Truffaut next level flannel hashtag American Apparel skateboard McSweeney's cray. Blog organic scenester Carles, church-key migas yr tousled Vice vegan freegan synth umami trust fund ennui. Drinking vinegar freegan pour-over blog. Before they sold out asymmetrical Carles jean shorts quinoa fashion axe swag, beard tote bag wolf mlkshk tattooed stumptown aesthetic. Tote bag tofu cold-pressed taxidermy 3 wolf moon. Selvage lomo fashion axe Tumblr.

            </div>

        </div>

    </div>

</div>

 

I prefer to consume bootstrap styles in my own LESS, but feel free to jump to the bottom for the vanilla CSS:

LESS

.toggle-collapse {

    display: block;

    text-align: right;

    text-decoration:none;

 

    &:hover, &:focus{

        text-decoration:none;

    }

 

    &:after {

        content: 'Collapse';

        margin-left: 5px;

    }

 

    > span {

        .glyphicon;

        .glyphicon-chevron-up;

        top: 2px;

        right: 75px;

        position: absolute;