2
\$\begingroup\$

I have put together a CSS snippet to responsively display a Show more / Show less button if content of list cannot fit 1 line (1em) when you resize the window using pseudo-elements.

Currently, I have added an ul:after element with a solid white bg to hide the Show more/less button when content does not overflow 1 line. Could not think of anything else but my solution seems a walkaround only like when there is a hole in the wall and you just hide it with a picture. Is there a better way to achieve this via CSS only? I am not sure if this solution can be buggy in some cases? Also, if I want to add a background image to the whole website, this item with its solid background would mess things up for example..

http://jsfiddle.net/6sj4e/524/

html:

<nav>
<input id="toggle" type="checkbox">
<label for="toggle"></label>
<ul>
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
  <li>Item #4</li>
  <li>Item #5</li>
  <li>Item #6</li>
</ul>
</nav>

css:

nav {
    position: relative;
    border: 1px solid #000;
    overflow: hidden;
}
nav ul {
    overflow: hidden;
    line-height: 1em;
    list-style-type: none;
    margin: 0;
    padding: 0;
    max-height: 1em;
    margin-bottom: 1em;
}
nav ul li{
    display:inline-block;
    padding: 0 1em 0 0;
}


input {
    display: none;
}
label {
    position: absolute;
    top: 100%;
    margin-top:-1em;
}
label:before {
    content: "Show More";
    cursor: pointer;
}
nav ul:after {
    content: '';
    position: absolute;
    display: block;
    height: 1em;
    width: 100%;
    background: white;
}


input:checked ~ ul {
    max-height: 100%;
}
input:checked + label:before {
    content: "Show Less";
}
input:checked ~ ul:after {
    display: none;
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.