Can text be hidden and shown using just CSS (no JavaScript code)?

Clash Royale CLAN TAG#URR8PPP

up vote
74
down vote

favorite

13

Is it possible to show and hide text using a link with only CSS -- without using JavaScript at all?

For example: On this page

Note the "More" link. When you click it, it unhides text. This particular example is JavaScript, but I am not sure if it can be done with pure CSS.

css

share|improve this question

edited Aug 22 at 16:16

Peter Mortensen

12.9k1983111

asked Aug 22 at 4:00

user3188544

761615

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  Another example of a CSS-only website (with menus) is grc.com (Steve Gibson of Security Now).
  – Peter Mortensen
  Aug 22 at 16:18
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Possible duplicates: 1 2
  – user202729
  Aug 23 at 7:30
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Just a brief piece of advice from my own experience. I was JS-phobic for my first few years of my career as a web developer, I'd look for all kinds of work-arounds, including the RJS format in Ruby on Rails (it's not great). Long story short, I recommend you learn to do it with JS. I found jQuery to be a good short-cut for this.
  – AJFaraday
  Aug 23 at 11:01
  

  
  
  
  

add a comment | 

up vote
74
down vote

favorite

13

Is it possible to show and hide text using a link with only CSS -- without using JavaScript at all?

For example: On this page

Note the "More" link. When you click it, it unhides text. This particular example is JavaScript, but I am not sure if it can be done with pure CSS.

css

share|improve this question

edited Aug 22 at 16:16

Peter Mortensen

12.9k1983111

asked Aug 22 at 4:00

user3188544

761615

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  Another example of a CSS-only website (with menus) is grc.com (Steve Gibson of Security Now).
  – Peter Mortensen
  Aug 22 at 16:18
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Possible duplicates: 1 2
  – user202729
  Aug 23 at 7:30
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Just a brief piece of advice from my own experience. I was JS-phobic for my first few years of my career as a web developer, I'd look for all kinds of work-arounds, including the RJS format in Ruby on Rails (it's not great). Long story short, I recommend you learn to do it with JS. I found jQuery to be a good short-cut for this.
  – AJFaraday
  Aug 23 at 11:01
  

  
  
  
  

add a comment | 

up vote
74
down vote

favorite

13

up vote
74
down vote

favorite

13

13

Is it possible to show and hide text using a link with only CSS -- without using JavaScript at all?

For example: On this page

Note the "More" link. When you click it, it unhides text. This particular example is JavaScript, but I am not sure if it can be done with pure CSS.

css

share|improve this question

edited Aug 22 at 16:16

Peter Mortensen

12.9k1983111

asked Aug 22 at 4:00

user3188544

761615

Is it possible to show and hide text using a link with only CSS -- without using JavaScript at all?

For example: On this page

Note the "More" link. When you click it, it unhides text. This particular example is JavaScript, but I am not sure if it can be done with pure CSS.

css

share|improve this question

edited Aug 22 at 16:16

Peter Mortensen

12.9k1983111

asked Aug 22 at 4:00

user3188544

761615

share|improve this question

share|improve this question

edited Aug 22 at 16:16

Peter Mortensen

12.9k1983111

edited Aug 22 at 16:16

Peter Mortensen

12.9k1983111

edited Aug 22 at 16:16

Peter Mortensen

12.9k1983111

12.9k1983111

asked Aug 22 at 4:00

user3188544

761615

asked Aug 22 at 4:00

user3188544

761615

asked Aug 22 at 4:00

user3188544

761615

761615

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  Another example of a CSS-only website (with menus) is grc.com (Steve Gibson of Security Now).
  – Peter Mortensen
  Aug 22 at 16:18
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Possible duplicates: 1 2
  – user202729
  Aug 23 at 7:30
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Just a brief piece of advice from my own experience. I was JS-phobic for my first few years of my career as a web developer, I'd look for all kinds of work-arounds, including the RJS format in Ruby on Rails (it's not great). Long story short, I recommend you learn to do it with JS. I found jQuery to be a good short-cut for this.
  – AJFaraday
  Aug 23 at 11:01
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  Another example of a CSS-only website (with menus) is grc.com (Steve Gibson of Security Now).
  – Peter Mortensen
  Aug 22 at 16:18
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Possible duplicates: 1 2
  – user202729
  Aug 23 at 7:30
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Just a brief piece of advice from my own experience. I was JS-phobic for my first few years of my career as a web developer, I'd look for all kinds of work-arounds, including the RJS format in Ruby on Rails (it's not great). Long story short, I recommend you learn to do it with JS. I found jQuery to be a good short-cut for this.
  – AJFaraday
  Aug 23 at 11:01
  

  
  
  
  

2

2

Another example of a CSS-only website (with menus) is grc.com (Steve Gibson of Security Now).
– Peter Mortensen
Aug 22 at 16:18

Another example of a CSS-only website (with menus) is grc.com (Steve Gibson of Security Now).
– Peter Mortensen
Aug 22 at 16:18

1

1

Possible duplicates: 1 2
– user202729
Aug 23 at 7:30

Possible duplicates: 1 2
– user202729
Aug 23 at 7:30

1

1

Just a brief piece of advice from my own experience. I was JS-phobic for my first few years of my career as a web developer, I'd look for all kinds of work-arounds, including the RJS format in Ruby on Rails (it's not great). Long story short, I recommend you learn to do it with JS. I found jQuery to be a good short-cut for this.
– AJFaraday
Aug 23 at 11:01

Just a brief piece of advice from my own experience. I was JS-phobic for my first few years of my career as a web developer, I'd look for all kinds of work-arounds, including the RJS format in Ruby on Rails (it's not great). Long story short, I recommend you learn to do it with JS. I found jQuery to be a good short-cut for this.
– AJFaraday
Aug 23 at 11:01

add a comment | 

8 Answers
8

active

oldest

votes

up vote
100
down vote

There’s the <details> element, which isn’t yet built into Edge:

<details>
 <summary>more <!-- a bad summary --></summary>
 <p>Some content</p>
</details>

I’m not sure how hard it is to style consistently across browsers.

There’s a common checkbox hack (where the checkbox can be hidden and the label can be styled to look like anything):

#more:not(:checked) ~ #content 
 display: none;

<input id="more" type="checkbox" /> <label for="more">more</label>

<p id="content">Some content</p>

but it’s not always (maybe ever? hmm) appropriate to use it; you can usually just fall back on showing the content when JavaScript fails to load, and have the “more” link link to it.

There’s also :target, but it’s probably even less appropriate, since it's harder to build in the closing mechanism.

#content 
 display: none;


#content:target 
 display: block;


#less 
 display: none;


#content:target ~ #less 
 display: block;

<a href="#content" id="more">More</a>
<p id="content">Lorem ipsum</p>
<a href="#" id="less">Less</a>

share|improve this answer

edited Aug 24 at 1:39

community wiki

4 revs, 2 users 68%
Ry-

• 
  
  
  

  
  7
  

  
  
  
  
  
  

  
  There are great legitimate uses for the checkbox method. Consider a form like this example I mocked up.
  – misterManSam
  Aug 22 at 5:11
  
  

  
  
  
  


• 
  
  
  

  
  6
  

  
  
  
  
  
  

  
  Puzzled why you think :checked or :target would never be appropriate. They exist, after all.
  – Konrad Rudolph
  Aug 22 at 10:34
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @KonradRudolph Only thing I can think of is the id requirement, making it more difficult to use for dynamic pages. Not a good reason though IMO - this hidden checkbox pattern is pretty old, not difficult to understand, and you can just use a hash as part of the ID in dynamic situations.
  – Izkata
  Aug 22 at 14:07
  
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  @KonradRudolph: might never be appropriate to expand content with a “more” link. Particularly :target – the content disappears if you link anywhere else. :checked means you can’t link inside the expansion, and if you hide the checkbox you have to make the label keyboard-focusable. Since for either of these to work the content has to be there already, I’d just show it by default and use JavaScript to provide the enhancement in most cases.
  – Ry-♦
  Aug 22 at 16:26
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @misterManSam: That’s not a “more” link, that’s an actual form.
  – Ry-♦
  Aug 22 at 16:28
  

  
  
  
  

 | 
show 8 more comments

up vote
34
down vote

Yes, this is possible with pure CSS. You're able to click on an element by making use of a checkbox's :checked attribute in combination with a <label> element's for attribute.

Because the checkbox can be unchecked, you can use this to toggle visibility by simply adding visibility: hidden to an element stemming from :checked (once the checkbox is clicked again, this pseudo-selector will be invalid, and the CSS selector will no longer match the target).

This can be extended to a <label> with use of the for attribute, so that you can completely hide the checkbox itself, and apply your own styling to the <label> directly.

The following makes use of the adjacent sibling combinator (+) to toggle the class toggle when the <label> element is clicked:

input[type="checkbox"] 
 display: none; /* Hide the checkbox */


/* This is tied to the invisible checkbox */
label 
 background-color: #4CAF50;
 border: 2px solid black;
 border-radius: 20px;
 color: white;
 padding: 15px 32px;
 text-align: center;
 font-size: 16px;
 display: inline-block;
 margin-bottom: 20px;
 cursor: pointer;
 user-select: none;


/* The target element to toggle */
input[type="checkbox"]:checked + label + .toggle 
 visibility: hidden;

<input type="checkbox" id="checkbox" />
<label for="checkbox">Click me to toggle the content</label>
<div class="toggle">CONTENT</div>

share|improve this answer

edited Aug 22 at 4:22

answered Aug 22 at 4:10

Obsidian Age

24.4k72243

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  This is what allows CSS to pass rule 110 and be considered Turing complete eli.fox-epste.in/rule110
  – Edmund Reed
  Aug 22 at 4:43
  

  
  
  
  

add a comment | 

up vote
12
down vote

Yes, you can easily do this using CSS only. Please refer to the code below:

* 
 box-sizing: border-box;


body 
 background-color: #646464;
 color: #fff;


header 
 background-color: rgba(0, 0, 0, 0.5);
 font-size: 1.5em;
 text-align: center;
 padding: 1em;


.panel-wrapper 
 position: relative;


.btn 
 color: #fff;
 background: #000;
 border-radius: 1.5em;
 left: 30%;
 padding: 1em;
 text-decoration: none;
 width: 40%;


.show,
.hide 
 position: absolute;
 bottom: -1em;
 z-index: 100;
 text-align: center;


.hide 
 display: none;


.show:target 
 display: none;


.show:target~.hide 
 display: block;


.show:target~.panel 
 max-height: 2000px;


.show:target~.fade 
 margin-top: 0;


.panel 
 position: relative;
 margin: 2em auto;
 width: 70%;
 max-height: 100px;
 overflow: hidden;
 transition: max-height .5s ease;


.fade 
 background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%, #646464 75%);
 height: 100px;
 margin-top: -100px;
 position: relative;

<!DOCTYPE html>
<html lang='en' class=''>

<head>
 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
</head>

<body>
 <header>CSS Only: Show More</header>
 <div class="panel-wrapper">
 <a href="#show" class="show btn" id="show">Show Full Article</a>
 <a href="#hide" class="hide btn" id="hide">Hide Full Article</a>
 <div class="panel">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra consectetur accumsan. Vestibulum vitae ipsum euismod, tempus ligula non, tempus lacus. Phasellus at pellentesque ex. Praesent at ipsum dui. Cras lectus neque, bibendum ac diam
 a, elementum tristique felis. Sed iaculis, diam at vehicula lacinia, odio urna tincidunt felis, sit amet scelerisque urna erat non leo. Pellentesque vel leo vitae tellus bibendum viverra.</p>
 <p>Donec id ultrices mi. Suspendisse potenti. Pellentesque cursus sagittis lacinia. Mauris elit sem, eleifend nec facilisis eget, fermentum sed odio. Nam aliquam massa nec leo tincidunt rhoncus. Integer tincidunt finibus tincidunt. Maecenas aliquam
 fermentum nisi, vitae mattis neque vehicula vitae.</p>
 <p>Nam orci purus, consequat sed lorem id, lacinia efficitur lorem. Vestibulum id quam ut elit congue varius. Donec justo augue, rhoncus non nisl ut, consectetur consequat velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aliquam
 auctor sapien lorem, at vestibulum justo congue vel. Duis volutpat, lorem quis tincidunt ornare, felis tortor posuere tellus, nec pretium neque velit vulputate libero.</p>
 <p>Morbi tortor tortor, auctor porttitor felis in, eleifend cursus ante. Nullam pellentesque lorem ipsum, in fringilla enim suscipit cursus. Pellentesque feugiat volutpat congue. Donec ac ante elit. Quisque ornare lacus dui, id commodo tortor lacinia
 nec. Curabitur dignissim magna sagittis neque aliquam porttitor. Aenean sit amet tincidunt risus.</p>
 <p>Cras feugiat, sapien luctus congue gravida, enim enim tristique nisl, vel porta lacus ante vitae dolor. Duis at nisl sed lectus imperdiet congue. Vestibulum pellentesque finibus ligula, sit amet elementum enim dignissim eget. Nullam bibendum justo
 eros, in placerat est ullamcorper nec. Donec blandit accumsan venenatis. Vivamus nec elit arcu. Morbi ultrices blandit sapien eget aliquam. Pellentesque placerat et libero a sodales. Donec eget erat ac velit maximus ullamcorper. Nulla laoreet
 dolor in purus sollicitudin varius. Duis eu erat ut magna lobortis rhoncus ac at lacus. Nullam in mi sed sem porttitor molestie. Aenean auctor dui in neque vulputate, in mattis purus tristique. Aliquam egestas venenatis ultricies. Nam elementum
 ante libero, nec dictum erat mollis dapibus. Phasellus pharetra euismod nibh, sit amet lobortis odio.</p>
 <p>Sed bibendum dapibus leo eu facilisis. Cras interdum malesuada diam id lobortis. Phasellus tristique odio eget placerat ornare. Phasellus nisl nulla, auctor convallis turpis tempus, molestie blandit urna. Nullam accumsan tellus massa, at tincidunt
 metus imperdiet sed. Donec sed imperdiet quam, id dignissim dolor. Curabitur mollis ultricies tempor. Morbi porttitor, turpis et dignissim aliquam, nunc lacus dignissim massa, a consequat nibh est vel turpis. Pellentesque blandit, ante vehicula
 sollicitudin imperdiet, tellus urna fringilla diam, id tempor neque augue eu nisl. Quisque eu sem posuere, vehicula risus ut, ullamcorper massa. Fusce vulputate bibendum erat, vel dapibus dui consectetur nec. Donec mauris mauris, egestas non malesuada
 non, finibus nec lacus. Duis at mauris tincidunt, accumsan augue non, vestibulum libero.</p>
 <p>Vestibulum fermentum vulputate lectus, at sollicitudin diam laoreet vitae. Aliquam erat volutpat. Nulla condimentum, arcu nec suscipit ultrices, urna tortor rutrum purus, sed mollis lacus ligula vitae justo. Duis vitae malesuada sem, eget finibus
 nibh. Etiam facilisis, urna ac blandit molestie, quam velit congue nibh, ac.</p>

 </div>
 <!-- end panel -->
 <div class="fade"></div>
 </div>
 <!-- end panel-wrapper -->

</body>

</html>

share|improve this answer

answered Aug 22 at 4:49

Akash

545212

add a comment | 

up vote
11
down vote

You could hide a checkbox, but allow it to be checked/unchecked via its associated <label> element.

Based on whether the checkbox is checked or not, you can hide/show the additional text, and even change the text of the label from "More" to "Less".

I've included some additional details in the CSS so that each definition's intentions can be a bit more clear.

1. With one toggle "More" / "Less" button:

.more-text, #more-checkbox /* Hide the second paragraph and checkbox */
 display: none;


input:checked ~ .more-text /* Show the second paragraph when checked */
 display: block;


.more-label::after /* Label underline, hand cursor, color */
 cursor: pointer;
 text-decoration: underline;
 color: #666;


input ~ .more-label::after /* Set label text to "More" by default */
 content: 'More';


input:checked ~ .more-label::after /* Set label text to "Less" when checked */
 content: 'Less';

<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.
</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox"></label>

<p class="more-text">
 Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

---

2. With "More" button at the top and "Less" button at the bottom:

.more-text, #more-checkbox, .less-label 
 display: none;


.more-label, .less-label 
 cursor: pointer;
 text-decoration: underline; 
 color: #666;


input:checked ~ .more-text, input:checked ~ .less-label 
 display: block;


input:checked ~ .more-label 
 display: none;

<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox">More</label>

<p class="more-text">
 Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

<label class="less-label" for="more-checkbox">Less</label>

share|improve this answer

edited Aug 22 at 4:38

answered Aug 22 at 4:11

Tyler Roper

10.8k11636

add a comment | 

up vote
8
down vote

Technically speaking, it is possible to toggle the visibility of text based on when you click on a button or link, as shown below:

.hidden-text 
 display: none;


.toggle-text:focus + .hidden-text 
 display: block;

<p>
 This is an example with no hidden content until you... <a href="#" class="toggle-text">read more</a>!
 <span class="hidden-text">Now I'm visible!!!</span>
</p>

That being said, I do strongly recommend that you familiarize yourself with JavaScript as the solution using JavaScript for something like this is much simpler and allows for additional flexibility.

share|improve this answer

answered Aug 22 at 4:08

Adam Chubbuck

439112

• 
  
  
  

  
  

  
  
  
  
  
  

  
  This depends on the browser focusing the link when you click on it, which the standard doesn't require (at least last time I checked), and which not all browsers do (e.g., this doesn't work on Safari). Using :checked or :target instead would probably be better.
  – chridd
  Aug 22 at 22:28
  

  
  
  
  

add a comment | 

up vote
7
down vote

Yes, you can do that by using HTML and CSS only.

body padding: 20px; 

div margin-top: 10px; border: 1px solid black; width: 200px; height: 100px;
 padding: 5px;

input:checked + label + div display: none; 
input + label:after content: " To Hide"; 
input:checked + label:after content: " To Show"; 

label 
 background-color: yellow;
 box-shadow: inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -2px 3px rgba(0,0,0,0.2);
 border-radius: 4px;
 font-size: 16px;
 display: inline-block;
 padding: 2px 5px;
 cursor: pointer;

<input type='checkbox' style='display: none' id=cb>
<label for=cb>Click Here</label>
<div>
 Hello. This is some stuff.
</div>

share|improve this answer

edited Aug 22 at 16:23

Peter Mortensen

12.9k1983111

answered Aug 22 at 11:58

monir alhussini

838

• 
  
  
  

  
  3
  

  
  
  
  
  
  

  
  Hi monir alhussini, welcome to Stack Overflow. Can I make a comment about how to improve your answer? Your code works very well (at least in my browser), but with some context it would make a better answer; for example, you could explain how and why this proposed change would resolve the questioner's problem, perhaps including a link to the relevant documentation. That would make it more useful to them, and also more useful to other site readers who are looking for solutions to similar problems.
  – Vince Bowdren
  Aug 23 at 10:30
  

  
  
  
  

add a comment | 

up vote
2
down vote

now you can hide/show text using only CSS too!
If you are using text input and want to show/hide text based on the state of the input box, you can use the new CSS pseudo-class :placeholder-shown for <input> or <textarea>.
Here is an example/demo of the above-mentioned pseudo-class!:

/* Some base style */

.app 
 margin: 50px auto;
 padding: 50px;


code 
 background-color: lightgray;
 padding: 4px;


input 
 padding: 5px 10px;


input:focus 
 outline: none;



/* When there is something in input box give 
 it a solid blue border */

input:not(:placeholder-shown) 
 border: solid 2px #42A5F5



/* Hide the p initially */

p 
 background-color: #F0F4C3;
 padding: 5px;
 opacity: 0;
 transition: all 300ms ease-in-out;



/* Show the p when the placeholder is not shown. 
 i.e. Something is in the input box and placeholder is gone */

input:not(:placeholder-shown)+p 
 opacity: 1

<div class="app">
 <h1>Hide/Show Text using input's <code>:placehoder-shown</code> psuedo class!</h1>
 <label for="name">Enter your name</label>
 <input type="text" id="name" placeholder="Your Name">
 <p class="msg">Well done!</p>
</div>

Here is Link to MDN Docs.

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

share|improve this answer

answered Aug 29 at 15:02

Hiren

3051417

add a comment | 

up vote
-2
down vote

Use "display: none;" attribute.

share|improve this answer

answered Aug 24 at 21:32

Ajay Munugala

152

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Hi @Ajay, thanks for your contribution. However, you seem to have only answered half the question: you've shown how to hide it, but not how to unhide it, and switch between the two states with CSS
  – Charlie Harding
  Aug 29 at 9:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  display: block; will unhide it.
  – Ajay Munugala
  Aug 30 at 19:27
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  And how do you use CSS to handle a click, to switch between the states, as the question is asking?
  – Charlie Harding
  Aug 31 at 15:14
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f51959677%2fcan-text-be-hidden-and-shown-using-just-css-no-javascript-code%23new-answer', 'question_page');

);

Post as a guest

Name Email

8 Answers
8

active

oldest

votes

8 Answers
8

active

oldest

votes

active

oldest

votes

active

oldest

votes

up vote
100
down vote

There’s the <details> element, which isn’t yet built into Edge:

<details>
 <summary>more <!-- a bad summary --></summary>
 <p>Some content</p>
</details>

I’m not sure how hard it is to style consistently across browsers.

There’s a common checkbox hack (where the checkbox can be hidden and the label can be styled to look like anything):

#more:not(:checked) ~ #content 
 display: none;

<input id="more" type="checkbox" /> <label for="more">more</label>

<p id="content">Some content</p>

but it’s not always (maybe ever? hmm) appropriate to use it; you can usually just fall back on showing the content when JavaScript fails to load, and have the “more” link link to it.

There’s also :target, but it’s probably even less appropriate, since it's harder to build in the closing mechanism.

#content 
 display: none;


#content:target 
 display: block;


#less 
 display: none;


#content:target ~ #less 
 display: block;

<a href="#content" id="more">More</a>
<p id="content">Lorem ipsum</p>
<a href="#" id="less">Less</a>

share|improve this answer

edited Aug 24 at 1:39

community wiki

4 revs, 2 users 68%
Ry-

• 
  
  
  

  
  7
  

  
  
  
  
  
  

  
  There are great legitimate uses for the checkbox method. Consider a form like this example I mocked up.
  – misterManSam
  Aug 22 at 5:11
  
  

  
  
  
  


• 
  
  
  

  
  6
  

  
  
  
  
  
  

  
  Puzzled why you think :checked or :target would never be appropriate. They exist, after all.
  – Konrad Rudolph
  Aug 22 at 10:34
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @KonradRudolph Only thing I can think of is the id requirement, making it more difficult to use for dynamic pages. Not a good reason though IMO - this hidden checkbox pattern is pretty old, not difficult to understand, and you can just use a hash as part of the ID in dynamic situations.
  – Izkata
  Aug 22 at 14:07
  
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  @KonradRudolph: might never be appropriate to expand content with a “more” link. Particularly :target – the content disappears if you link anywhere else. :checked means you can’t link inside the expansion, and if you hide the checkbox you have to make the label keyboard-focusable. Since for either of these to work the content has to be there already, I’d just show it by default and use JavaScript to provide the enhancement in most cases.
  – Ry-♦
  Aug 22 at 16:26
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @misterManSam: That’s not a “more” link, that’s an actual form.
  – Ry-♦
  Aug 22 at 16:28
  

  
  
  
  

 | 
show 8 more comments

up vote
100
down vote

There’s the <details> element, which isn’t yet built into Edge:

<details>
 <summary>more <!-- a bad summary --></summary>
 <p>Some content</p>
</details>

I’m not sure how hard it is to style consistently across browsers.

There’s a common checkbox hack (where the checkbox can be hidden and the label can be styled to look like anything):

#more:not(:checked) ~ #content 
 display: none;

<input id="more" type="checkbox" /> <label for="more">more</label>

<p id="content">Some content</p>

but it’s not always (maybe ever? hmm) appropriate to use it; you can usually just fall back on showing the content when JavaScript fails to load, and have the “more” link link to it.

There’s also :target, but it’s probably even less appropriate, since it's harder to build in the closing mechanism.

#content 
 display: none;


#content:target 
 display: block;


#less 
 display: none;


#content:target ~ #less 
 display: block;

<a href="#content" id="more">More</a>
<p id="content">Lorem ipsum</p>
<a href="#" id="less">Less</a>

share|improve this answer

edited Aug 24 at 1:39

community wiki

4 revs, 2 users 68%
Ry-

• 
  
  
  

  
  7
  

  
  
  
  
  
  

  
  There are great legitimate uses for the checkbox method. Consider a form like this example I mocked up.
  – misterManSam
  Aug 22 at 5:11
  
  

  
  
  
  


• 
  
  
  

  
  6
  

  
  
  
  
  
  

  
  Puzzled why you think :checked or :target would never be appropriate. They exist, after all.
  – Konrad Rudolph
  Aug 22 at 10:34
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @KonradRudolph Only thing I can think of is the id requirement, making it more difficult to use for dynamic pages. Not a good reason though IMO - this hidden checkbox pattern is pretty old, not difficult to understand, and you can just use a hash as part of the ID in dynamic situations.
  – Izkata
  Aug 22 at 14:07
  
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  @KonradRudolph: might never be appropriate to expand content with a “more” link. Particularly :target – the content disappears if you link anywhere else. :checked means you can’t link inside the expansion, and if you hide the checkbox you have to make the label keyboard-focusable. Since for either of these to work the content has to be there already, I’d just show it by default and use JavaScript to provide the enhancement in most cases.
  – Ry-♦
  Aug 22 at 16:26
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @misterManSam: That’s not a “more” link, that’s an actual form.
  – Ry-♦
  Aug 22 at 16:28
  

  
  
  
  

 | 
show 8 more comments

up vote
100
down vote

up vote
100
down vote

There’s the <details> element, which isn’t yet built into Edge:

<details>
 <summary>more <!-- a bad summary --></summary>
 <p>Some content</p>
</details>

I’m not sure how hard it is to style consistently across browsers.

There’s a common checkbox hack (where the checkbox can be hidden and the label can be styled to look like anything):

#more:not(:checked) ~ #content 
 display: none;

<input id="more" type="checkbox" /> <label for="more">more</label>

<p id="content">Some content</p>

but it’s not always (maybe ever? hmm) appropriate to use it; you can usually just fall back on showing the content when JavaScript fails to load, and have the “more” link link to it.

There’s also :target, but it’s probably even less appropriate, since it's harder to build in the closing mechanism.

#content 
 display: none;


#content:target 
 display: block;


#less 
 display: none;


#content:target ~ #less 
 display: block;

<a href="#content" id="more">More</a>
<p id="content">Lorem ipsum</p>
<a href="#" id="less">Less</a>

share|improve this answer

edited Aug 24 at 1:39

community wiki

4 revs, 2 users 68%
Ry-

There’s the <details> element, which isn’t yet built into Edge:

<details>
 <summary>more <!-- a bad summary --></summary>
 <p>Some content</p>
</details>

I’m not sure how hard it is to style consistently across browsers.

There’s a common checkbox hack (where the checkbox can be hidden and the label can be styled to look like anything):

#more:not(:checked) ~ #content 
 display: none;

<input id="more" type="checkbox" /> <label for="more">more</label>

<p id="content">Some content</p>

but it’s not always (maybe ever? hmm) appropriate to use it; you can usually just fall back on showing the content when JavaScript fails to load, and have the “more” link link to it.

There’s also :target, but it’s probably even less appropriate, since it's harder to build in the closing mechanism.

#content 
 display: none;


#content:target 
 display: block;


#less 
 display: none;


#content:target ~ #less 
 display: block;

<a href="#content" id="more">More</a>
<p id="content">Lorem ipsum</p>
<a href="#" id="less">Less</a>

<details>
 <summary>more <!-- a bad summary --></summary>
 <p>Some content</p>
</details>

<details>
 <summary>more <!-- a bad summary --></summary>
 <p>Some content</p>
</details>

#more:not(:checked) ~ #content 
 display: none;

<input id="more" type="checkbox" /> <label for="more">more</label>

<p id="content">Some content</p>

#more:not(:checked) ~ #content 
 display: none;

<input id="more" type="checkbox" /> <label for="more">more</label>

<p id="content">Some content</p>

#content 
 display: none;


#content:target 
 display: block;


#less 
 display: none;


#content:target ~ #less 
 display: block;

<a href="#content" id="more">More</a>
<p id="content">Lorem ipsum</p>
<a href="#" id="less">Less</a>

#content 
 display: none;


#content:target 
 display: block;


#less 
 display: none;


#content:target ~ #less 
 display: block;

<a href="#content" id="more">More</a>
<p id="content">Lorem ipsum</p>
<a href="#" id="less">Less</a>

share|improve this answer

edited Aug 24 at 1:39

community wiki

4 revs, 2 users 68%
Ry-

share|improve this answer

share|improve this answer

edited Aug 24 at 1:39

edited Aug 24 at 1:39

edited Aug 24 at 1:39

community wiki

4 revs, 2 users 68%
Ry-

community wiki

4 revs, 2 users 68%
Ry-

community wiki

4 revs, 2 users 68%
Ry-

• 
  
  
  

  
  7
  

  
  
  
  
  
  

  
  There are great legitimate uses for the checkbox method. Consider a form like this example I mocked up.
  – misterManSam
  Aug 22 at 5:11
  
  

  
  
  
  


• 
  
  
  

  
  6
  

  
  
  
  
  
  

  
  Puzzled why you think :checked or :target would never be appropriate. They exist, after all.
  – Konrad Rudolph
  Aug 22 at 10:34
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @KonradRudolph Only thing I can think of is the id requirement, making it more difficult to use for dynamic pages. Not a good reason though IMO - this hidden checkbox pattern is pretty old, not difficult to understand, and you can just use a hash as part of the ID in dynamic situations.
  – Izkata
  Aug 22 at 14:07
  
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  @KonradRudolph: might never be appropriate to expand content with a “more” link. Particularly :target – the content disappears if you link anywhere else. :checked means you can’t link inside the expansion, and if you hide the checkbox you have to make the label keyboard-focusable. Since for either of these to work the content has to be there already, I’d just show it by default and use JavaScript to provide the enhancement in most cases.
  – Ry-♦
  Aug 22 at 16:26
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @misterManSam: That’s not a “more” link, that’s an actual form.
  – Ry-♦
  Aug 22 at 16:28
  

  
  
  
  

 | 
show 8 more comments

• 
  
  
  

  
  7
  

  
  
  
  
  
  

  
  There are great legitimate uses for the checkbox method. Consider a form like this example I mocked up.
  – misterManSam
  Aug 22 at 5:11
  
  

  
  
  
  


• 
  
  
  

  
  6
  

  
  
  
  
  
  

  
  Puzzled why you think :checked or :target would never be appropriate. They exist, after all.
  – Konrad Rudolph
  Aug 22 at 10:34
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @KonradRudolph Only thing I can think of is the id requirement, making it more difficult to use for dynamic pages. Not a good reason though IMO - this hidden checkbox pattern is pretty old, not difficult to understand, and you can just use a hash as part of the ID in dynamic situations.
  – Izkata
  Aug 22 at 14:07
  
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  @KonradRudolph: might never be appropriate to expand content with a “more” link. Particularly :target – the content disappears if you link anywhere else. :checked means you can’t link inside the expansion, and if you hide the checkbox you have to make the label keyboard-focusable. Since for either of these to work the content has to be there already, I’d just show it by default and use JavaScript to provide the enhancement in most cases.
  – Ry-♦
  Aug 22 at 16:26
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @misterManSam: That’s not a “more” link, that’s an actual form.
  – Ry-♦
  Aug 22 at 16:28
  

  
  
  
  

7

7

There are great legitimate uses for the checkbox method. Consider a form like this example I mocked up.
– misterManSam
Aug 22 at 5:11

There are great legitimate uses for the checkbox method. Consider a form like this example I mocked up.
– misterManSam
Aug 22 at 5:11

6

6

Puzzled why you think :checked or :target would never be appropriate. They exist, after all.
– Konrad Rudolph
Aug 22 at 10:34

Puzzled why you think :checked or :target would never be appropriate. They exist, after all.
– Konrad Rudolph
Aug 22 at 10:34

@KonradRudolph Only thing I can think of is the id requirement, making it more difficult to use for dynamic pages. Not a good reason though IMO - this hidden checkbox pattern is pretty old, not difficult to understand, and you can just use a hash as part of the ID in dynamic situations.
– Izkata
Aug 22 at 14:07

@KonradRudolph Only thing I can think of is the id requirement, making it more difficult to use for dynamic pages. Not a good reason though IMO - this hidden checkbox pattern is pretty old, not difficult to understand, and you can just use a hash as part of the ID in dynamic situations.
– Izkata
Aug 22 at 14:07

2

2

@KonradRudolph: might never be appropriate to expand content with a “more” link. Particularly :target – the content disappears if you link anywhere else. :checked means you can’t link inside the expansion, and if you hide the checkbox you have to make the label keyboard-focusable. Since for either of these to work the content has to be there already, I’d just show it by default and use JavaScript to provide the enhancement in most cases.
– Ry-♦
Aug 22 at 16:26

@KonradRudolph: might never be appropriate to expand content with a “more” link. Particularly :target – the content disappears if you link anywhere else. :checked means you can’t link inside the expansion, and if you hide the checkbox you have to make the label keyboard-focusable. Since for either of these to work the content has to be there already, I’d just show it by default and use JavaScript to provide the enhancement in most cases.
– Ry-♦
Aug 22 at 16:26

@misterManSam: That’s not a “more” link, that’s an actual form.
– Ry-♦
Aug 22 at 16:28

@misterManSam: That’s not a “more” link, that’s an actual form.
– Ry-♦
Aug 22 at 16:28

 | 
show 8 more comments

up vote
34
down vote

Yes, this is possible with pure CSS. You're able to click on an element by making use of a checkbox's :checked attribute in combination with a <label> element's for attribute.

Because the checkbox can be unchecked, you can use this to toggle visibility by simply adding visibility: hidden to an element stemming from :checked (once the checkbox is clicked again, this pseudo-selector will be invalid, and the CSS selector will no longer match the target).

This can be extended to a <label> with use of the for attribute, so that you can completely hide the checkbox itself, and apply your own styling to the <label> directly.

The following makes use of the adjacent sibling combinator (+) to toggle the class toggle when the <label> element is clicked:

input[type="checkbox"] 
 display: none; /* Hide the checkbox */


/* This is tied to the invisible checkbox */
label 
 background-color: #4CAF50;
 border: 2px solid black;
 border-radius: 20px;
 color: white;
 padding: 15px 32px;
 text-align: center;
 font-size: 16px;
 display: inline-block;
 margin-bottom: 20px;
 cursor: pointer;
 user-select: none;


/* The target element to toggle */
input[type="checkbox"]:checked + label + .toggle 
 visibility: hidden;

<input type="checkbox" id="checkbox" />
<label for="checkbox">Click me to toggle the content</label>
<div class="toggle">CONTENT</div>

share|improve this answer

edited Aug 22 at 4:22

answered Aug 22 at 4:10

Obsidian Age

24.4k72243

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  This is what allows CSS to pass rule 110 and be considered Turing complete eli.fox-epste.in/rule110
  – Edmund Reed
  Aug 22 at 4:43
  

  
  
  
  

add a comment | 

up vote
34
down vote

Yes, this is possible with pure CSS. You're able to click on an element by making use of a checkbox's :checked attribute in combination with a <label> element's for attribute.

Because the checkbox can be unchecked, you can use this to toggle visibility by simply adding visibility: hidden to an element stemming from :checked (once the checkbox is clicked again, this pseudo-selector will be invalid, and the CSS selector will no longer match the target).

This can be extended to a <label> with use of the for attribute, so that you can completely hide the checkbox itself, and apply your own styling to the <label> directly.

The following makes use of the adjacent sibling combinator (+) to toggle the class toggle when the <label> element is clicked:

input[type="checkbox"] 
 display: none; /* Hide the checkbox */


/* This is tied to the invisible checkbox */
label 
 background-color: #4CAF50;
 border: 2px solid black;
 border-radius: 20px;
 color: white;
 padding: 15px 32px;
 text-align: center;
 font-size: 16px;
 display: inline-block;
 margin-bottom: 20px;
 cursor: pointer;
 user-select: none;


/* The target element to toggle */
input[type="checkbox"]:checked + label + .toggle 
 visibility: hidden;

<input type="checkbox" id="checkbox" />
<label for="checkbox">Click me to toggle the content</label>
<div class="toggle">CONTENT</div>

share|improve this answer

edited Aug 22 at 4:22

answered Aug 22 at 4:10

Obsidian Age

24.4k72243

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  This is what allows CSS to pass rule 110 and be considered Turing complete eli.fox-epste.in/rule110
  – Edmund Reed
  Aug 22 at 4:43
  

  
  
  
  

add a comment | 

up vote
34
down vote

up vote
34
down vote

Yes, this is possible with pure CSS. You're able to click on an element by making use of a checkbox's :checked attribute in combination with a <label> element's for attribute.

Because the checkbox can be unchecked, you can use this to toggle visibility by simply adding visibility: hidden to an element stemming from :checked (once the checkbox is clicked again, this pseudo-selector will be invalid, and the CSS selector will no longer match the target).

This can be extended to a <label> with use of the for attribute, so that you can completely hide the checkbox itself, and apply your own styling to the <label> directly.

The following makes use of the adjacent sibling combinator (+) to toggle the class toggle when the <label> element is clicked:

input[type="checkbox"] 
 display: none; /* Hide the checkbox */


/* This is tied to the invisible checkbox */
label 
 background-color: #4CAF50;
 border: 2px solid black;
 border-radius: 20px;
 color: white;
 padding: 15px 32px;
 text-align: center;
 font-size: 16px;
 display: inline-block;
 margin-bottom: 20px;
 cursor: pointer;
 user-select: none;


/* The target element to toggle */
input[type="checkbox"]:checked + label + .toggle 
 visibility: hidden;

<input type="checkbox" id="checkbox" />
<label for="checkbox">Click me to toggle the content</label>
<div class="toggle">CONTENT</div>

share|improve this answer

edited Aug 22 at 4:22

answered Aug 22 at 4:10

Obsidian Age

24.4k72243

Yes, this is possible with pure CSS. You're able to click on an element by making use of a checkbox's :checked attribute in combination with a <label> element's for attribute.

Because the checkbox can be unchecked, you can use this to toggle visibility by simply adding visibility: hidden to an element stemming from :checked (once the checkbox is clicked again, this pseudo-selector will be invalid, and the CSS selector will no longer match the target).

This can be extended to a <label> with use of the for attribute, so that you can completely hide the checkbox itself, and apply your own styling to the <label> directly.

The following makes use of the adjacent sibling combinator (+) to toggle the class toggle when the <label> element is clicked:

input[type="checkbox"] 
 display: none; /* Hide the checkbox */


/* This is tied to the invisible checkbox */
label 
 background-color: #4CAF50;
 border: 2px solid black;
 border-radius: 20px;
 color: white;
 padding: 15px 32px;
 text-align: center;
 font-size: 16px;
 display: inline-block;
 margin-bottom: 20px;
 cursor: pointer;
 user-select: none;


/* The target element to toggle */
input[type="checkbox"]:checked + label + .toggle 
 visibility: hidden;

<input type="checkbox" id="checkbox" />
<label for="checkbox">Click me to toggle the content</label>
<div class="toggle">CONTENT</div>

input[type="checkbox"] 
 display: none; /* Hide the checkbox */


/* This is tied to the invisible checkbox */
label 
 background-color: #4CAF50;
 border: 2px solid black;
 border-radius: 20px;
 color: white;
 padding: 15px 32px;
 text-align: center;
 font-size: 16px;
 display: inline-block;
 margin-bottom: 20px;
 cursor: pointer;
 user-select: none;


/* The target element to toggle */
input[type="checkbox"]:checked + label + .toggle 
 visibility: hidden;

<input type="checkbox" id="checkbox" />
<label for="checkbox">Click me to toggle the content</label>
<div class="toggle">CONTENT</div>

input[type="checkbox"] 
 display: none; /* Hide the checkbox */


/* This is tied to the invisible checkbox */
label 
 background-color: #4CAF50;
 border: 2px solid black;
 border-radius: 20px;
 color: white;
 padding: 15px 32px;
 text-align: center;
 font-size: 16px;
 display: inline-block;
 margin-bottom: 20px;
 cursor: pointer;
 user-select: none;


/* The target element to toggle */
input[type="checkbox"]:checked + label + .toggle 
 visibility: hidden;

<input type="checkbox" id="checkbox" />
<label for="checkbox">Click me to toggle the content</label>
<div class="toggle">CONTENT</div>

share|improve this answer

edited Aug 22 at 4:22

answered Aug 22 at 4:10

Obsidian Age

24.4k72243

share|improve this answer

share|improve this answer

edited Aug 22 at 4:22

edited Aug 22 at 4:22

edited Aug 22 at 4:22

answered Aug 22 at 4:10

Obsidian Age

24.4k72243

answered Aug 22 at 4:10

Obsidian Age

24.4k72243

answered Aug 22 at 4:10

Obsidian Age

24.4k72243

24.4k72243

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  This is what allows CSS to pass rule 110 and be considered Turing complete eli.fox-epste.in/rule110
  – Edmund Reed
  Aug 22 at 4:43
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  This is what allows CSS to pass rule 110 and be considered Turing complete eli.fox-epste.in/rule110
  – Edmund Reed
  Aug 22 at 4:43
  

  
  
  
  

2

2

This is what allows CSS to pass rule 110 and be considered Turing complete eli.fox-epste.in/rule110
– Edmund Reed
Aug 22 at 4:43

This is what allows CSS to pass rule 110 and be considered Turing complete eli.fox-epste.in/rule110
– Edmund Reed
Aug 22 at 4:43

add a comment | 

up vote
12
down vote

Yes, you can easily do this using CSS only. Please refer to the code below:

* 
 box-sizing: border-box;


body 
 background-color: #646464;
 color: #fff;


header 
 background-color: rgba(0, 0, 0, 0.5);
 font-size: 1.5em;
 text-align: center;
 padding: 1em;


.panel-wrapper 
 position: relative;


.btn 
 color: #fff;
 background: #000;
 border-radius: 1.5em;
 left: 30%;
 padding: 1em;
 text-decoration: none;
 width: 40%;


.show,
.hide 
 position: absolute;
 bottom: -1em;
 z-index: 100;
 text-align: center;


.hide 
 display: none;


.show:target 
 display: none;


.show:target~.hide 
 display: block;


.show:target~.panel 
 max-height: 2000px;


.show:target~.fade 
 margin-top: 0;


.panel 
 position: relative;
 margin: 2em auto;
 width: 70%;
 max-height: 100px;
 overflow: hidden;
 transition: max-height .5s ease;


.fade 
 background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%, #646464 75%);
 height: 100px;
 margin-top: -100px;
 position: relative;

<!DOCTYPE html>
<html lang='en' class=''>

<head>
 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
</head>

<body>
 <header>CSS Only: Show More</header>
 <div class="panel-wrapper">
 <a href="#show" class="show btn" id="show">Show Full Article</a>
 <a href="#hide" class="hide btn" id="hide">Hide Full Article</a>
 <div class="panel">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra consectetur accumsan. Vestibulum vitae ipsum euismod, tempus ligula non, tempus lacus. Phasellus at pellentesque ex. Praesent at ipsum dui. Cras lectus neque, bibendum ac diam
 a, elementum tristique felis. Sed iaculis, diam at vehicula lacinia, odio urna tincidunt felis, sit amet scelerisque urna erat non leo. Pellentesque vel leo vitae tellus bibendum viverra.</p>
 <p>Donec id ultrices mi. Suspendisse potenti. Pellentesque cursus sagittis lacinia. Mauris elit sem, eleifend nec facilisis eget, fermentum sed odio. Nam aliquam massa nec leo tincidunt rhoncus. Integer tincidunt finibus tincidunt. Maecenas aliquam
 fermentum nisi, vitae mattis neque vehicula vitae.</p>
 <p>Nam orci purus, consequat sed lorem id, lacinia efficitur lorem. Vestibulum id quam ut elit congue varius. Donec justo augue, rhoncus non nisl ut, consectetur consequat velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aliquam
 auctor sapien lorem, at vestibulum justo congue vel. Duis volutpat, lorem quis tincidunt ornare, felis tortor posuere tellus, nec pretium neque velit vulputate libero.</p>
 <p>Morbi tortor tortor, auctor porttitor felis in, eleifend cursus ante. Nullam pellentesque lorem ipsum, in fringilla enim suscipit cursus. Pellentesque feugiat volutpat congue. Donec ac ante elit. Quisque ornare lacus dui, id commodo tortor lacinia
 nec. Curabitur dignissim magna sagittis neque aliquam porttitor. Aenean sit amet tincidunt risus.</p>
 <p>Cras feugiat, sapien luctus congue gravida, enim enim tristique nisl, vel porta lacus ante vitae dolor. Duis at nisl sed lectus imperdiet congue. Vestibulum pellentesque finibus ligula, sit amet elementum enim dignissim eget. Nullam bibendum justo
 eros, in placerat est ullamcorper nec. Donec blandit accumsan venenatis. Vivamus nec elit arcu. Morbi ultrices blandit sapien eget aliquam. Pellentesque placerat et libero a sodales. Donec eget erat ac velit maximus ullamcorper. Nulla laoreet
 dolor in purus sollicitudin varius. Duis eu erat ut magna lobortis rhoncus ac at lacus. Nullam in mi sed sem porttitor molestie. Aenean auctor dui in neque vulputate, in mattis purus tristique. Aliquam egestas venenatis ultricies. Nam elementum
 ante libero, nec dictum erat mollis dapibus. Phasellus pharetra euismod nibh, sit amet lobortis odio.</p>
 <p>Sed bibendum dapibus leo eu facilisis. Cras interdum malesuada diam id lobortis. Phasellus tristique odio eget placerat ornare. Phasellus nisl nulla, auctor convallis turpis tempus, molestie blandit urna. Nullam accumsan tellus massa, at tincidunt
 metus imperdiet sed. Donec sed imperdiet quam, id dignissim dolor. Curabitur mollis ultricies tempor. Morbi porttitor, turpis et dignissim aliquam, nunc lacus dignissim massa, a consequat nibh est vel turpis. Pellentesque blandit, ante vehicula
 sollicitudin imperdiet, tellus urna fringilla diam, id tempor neque augue eu nisl. Quisque eu sem posuere, vehicula risus ut, ullamcorper massa. Fusce vulputate bibendum erat, vel dapibus dui consectetur nec. Donec mauris mauris, egestas non malesuada
 non, finibus nec lacus. Duis at mauris tincidunt, accumsan augue non, vestibulum libero.</p>
 <p>Vestibulum fermentum vulputate lectus, at sollicitudin diam laoreet vitae. Aliquam erat volutpat. Nulla condimentum, arcu nec suscipit ultrices, urna tortor rutrum purus, sed mollis lacus ligula vitae justo. Duis vitae malesuada sem, eget finibus
 nibh. Etiam facilisis, urna ac blandit molestie, quam velit congue nibh, ac.</p>

 </div>
 <!-- end panel -->
 <div class="fade"></div>
 </div>
 <!-- end panel-wrapper -->

</body>

</html>

share|improve this answer

answered Aug 22 at 4:49

Akash

545212

add a comment | 

up vote
12
down vote

Yes, you can easily do this using CSS only. Please refer to the code below:

* 
 box-sizing: border-box;


body 
 background-color: #646464;
 color: #fff;


header 
 background-color: rgba(0, 0, 0, 0.5);
 font-size: 1.5em;
 text-align: center;
 padding: 1em;


.panel-wrapper 
 position: relative;


.btn 
 color: #fff;
 background: #000;
 border-radius: 1.5em;
 left: 30%;
 padding: 1em;
 text-decoration: none;
 width: 40%;


.show,
.hide 
 position: absolute;
 bottom: -1em;
 z-index: 100;
 text-align: center;


.hide 
 display: none;


.show:target 
 display: none;


.show:target~.hide 
 display: block;


.show:target~.panel 
 max-height: 2000px;


.show:target~.fade 
 margin-top: 0;


.panel 
 position: relative;
 margin: 2em auto;
 width: 70%;
 max-height: 100px;
 overflow: hidden;
 transition: max-height .5s ease;


.fade 
 background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%, #646464 75%);
 height: 100px;
 margin-top: -100px;
 position: relative;

<!DOCTYPE html>
<html lang='en' class=''>

<head>
 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
</head>

<body>
 <header>CSS Only: Show More</header>
 <div class="panel-wrapper">
 <a href="#show" class="show btn" id="show">Show Full Article</a>
 <a href="#hide" class="hide btn" id="hide">Hide Full Article</a>
 <div class="panel">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra consectetur accumsan. Vestibulum vitae ipsum euismod, tempus ligula non, tempus lacus. Phasellus at pellentesque ex. Praesent at ipsum dui. Cras lectus neque, bibendum ac diam
 a, elementum tristique felis. Sed iaculis, diam at vehicula lacinia, odio urna tincidunt felis, sit amet scelerisque urna erat non leo. Pellentesque vel leo vitae tellus bibendum viverra.</p>
 <p>Donec id ultrices mi. Suspendisse potenti. Pellentesque cursus sagittis lacinia. Mauris elit sem, eleifend nec facilisis eget, fermentum sed odio. Nam aliquam massa nec leo tincidunt rhoncus. Integer tincidunt finibus tincidunt. Maecenas aliquam
 fermentum nisi, vitae mattis neque vehicula vitae.</p>
 <p>Nam orci purus, consequat sed lorem id, lacinia efficitur lorem. Vestibulum id quam ut elit congue varius. Donec justo augue, rhoncus non nisl ut, consectetur consequat velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aliquam
 auctor sapien lorem, at vestibulum justo congue vel. Duis volutpat, lorem quis tincidunt ornare, felis tortor posuere tellus, nec pretium neque velit vulputate libero.</p>
 <p>Morbi tortor tortor, auctor porttitor felis in, eleifend cursus ante. Nullam pellentesque lorem ipsum, in fringilla enim suscipit cursus. Pellentesque feugiat volutpat congue. Donec ac ante elit. Quisque ornare lacus dui, id commodo tortor lacinia
 nec. Curabitur dignissim magna sagittis neque aliquam porttitor. Aenean sit amet tincidunt risus.</p>
 <p>Cras feugiat, sapien luctus congue gravida, enim enim tristique nisl, vel porta lacus ante vitae dolor. Duis at nisl sed lectus imperdiet congue. Vestibulum pellentesque finibus ligula, sit amet elementum enim dignissim eget. Nullam bibendum justo
 eros, in placerat est ullamcorper nec. Donec blandit accumsan venenatis. Vivamus nec elit arcu. Morbi ultrices blandit sapien eget aliquam. Pellentesque placerat et libero a sodales. Donec eget erat ac velit maximus ullamcorper. Nulla laoreet
 dolor in purus sollicitudin varius. Duis eu erat ut magna lobortis rhoncus ac at lacus. Nullam in mi sed sem porttitor molestie. Aenean auctor dui in neque vulputate, in mattis purus tristique. Aliquam egestas venenatis ultricies. Nam elementum
 ante libero, nec dictum erat mollis dapibus. Phasellus pharetra euismod nibh, sit amet lobortis odio.</p>
 <p>Sed bibendum dapibus leo eu facilisis. Cras interdum malesuada diam id lobortis. Phasellus tristique odio eget placerat ornare. Phasellus nisl nulla, auctor convallis turpis tempus, molestie blandit urna. Nullam accumsan tellus massa, at tincidunt
 metus imperdiet sed. Donec sed imperdiet quam, id dignissim dolor. Curabitur mollis ultricies tempor. Morbi porttitor, turpis et dignissim aliquam, nunc lacus dignissim massa, a consequat nibh est vel turpis. Pellentesque blandit, ante vehicula
 sollicitudin imperdiet, tellus urna fringilla diam, id tempor neque augue eu nisl. Quisque eu sem posuere, vehicula risus ut, ullamcorper massa. Fusce vulputate bibendum erat, vel dapibus dui consectetur nec. Donec mauris mauris, egestas non malesuada
 non, finibus nec lacus. Duis at mauris tincidunt, accumsan augue non, vestibulum libero.</p>
 <p>Vestibulum fermentum vulputate lectus, at sollicitudin diam laoreet vitae. Aliquam erat volutpat. Nulla condimentum, arcu nec suscipit ultrices, urna tortor rutrum purus, sed mollis lacus ligula vitae justo. Duis vitae malesuada sem, eget finibus
 nibh. Etiam facilisis, urna ac blandit molestie, quam velit congue nibh, ac.</p>

 </div>
 <!-- end panel -->
 <div class="fade"></div>
 </div>
 <!-- end panel-wrapper -->

</body>

</html>

share|improve this answer

answered Aug 22 at 4:49

Akash

545212

add a comment | 

up vote
12
down vote

up vote
12
down vote

Yes, you can easily do this using CSS only. Please refer to the code below:

* 
 box-sizing: border-box;


body 
 background-color: #646464;
 color: #fff;


header 
 background-color: rgba(0, 0, 0, 0.5);
 font-size: 1.5em;
 text-align: center;
 padding: 1em;


.panel-wrapper 
 position: relative;


.btn 
 color: #fff;
 background: #000;
 border-radius: 1.5em;
 left: 30%;
 padding: 1em;
 text-decoration: none;
 width: 40%;


.show,
.hide 
 position: absolute;
 bottom: -1em;
 z-index: 100;
 text-align: center;


.hide 
 display: none;


.show:target 
 display: none;


.show:target~.hide 
 display: block;


.show:target~.panel 
 max-height: 2000px;


.show:target~.fade 
 margin-top: 0;


.panel 
 position: relative;
 margin: 2em auto;
 width: 70%;
 max-height: 100px;
 overflow: hidden;
 transition: max-height .5s ease;


.fade 
 background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%, #646464 75%);
 height: 100px;
 margin-top: -100px;
 position: relative;

<!DOCTYPE html>
<html lang='en' class=''>

<head>
 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
</head>

<body>
 <header>CSS Only: Show More</header>
 <div class="panel-wrapper">
 <a href="#show" class="show btn" id="show">Show Full Article</a>
 <a href="#hide" class="hide btn" id="hide">Hide Full Article</a>
 <div class="panel">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra consectetur accumsan. Vestibulum vitae ipsum euismod, tempus ligula non, tempus lacus. Phasellus at pellentesque ex. Praesent at ipsum dui. Cras lectus neque, bibendum ac diam
 a, elementum tristique felis. Sed iaculis, diam at vehicula lacinia, odio urna tincidunt felis, sit amet scelerisque urna erat non leo. Pellentesque vel leo vitae tellus bibendum viverra.</p>
 <p>Donec id ultrices mi. Suspendisse potenti. Pellentesque cursus sagittis lacinia. Mauris elit sem, eleifend nec facilisis eget, fermentum sed odio. Nam aliquam massa nec leo tincidunt rhoncus. Integer tincidunt finibus tincidunt. Maecenas aliquam
 fermentum nisi, vitae mattis neque vehicula vitae.</p>
 <p>Nam orci purus, consequat sed lorem id, lacinia efficitur lorem. Vestibulum id quam ut elit congue varius. Donec justo augue, rhoncus non nisl ut, consectetur consequat velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aliquam
 auctor sapien lorem, at vestibulum justo congue vel. Duis volutpat, lorem quis tincidunt ornare, felis tortor posuere tellus, nec pretium neque velit vulputate libero.</p>
 <p>Morbi tortor tortor, auctor porttitor felis in, eleifend cursus ante. Nullam pellentesque lorem ipsum, in fringilla enim suscipit cursus. Pellentesque feugiat volutpat congue. Donec ac ante elit. Quisque ornare lacus dui, id commodo tortor lacinia
 nec. Curabitur dignissim magna sagittis neque aliquam porttitor. Aenean sit amet tincidunt risus.</p>
 <p>Cras feugiat, sapien luctus congue gravida, enim enim tristique nisl, vel porta lacus ante vitae dolor. Duis at nisl sed lectus imperdiet congue. Vestibulum pellentesque finibus ligula, sit amet elementum enim dignissim eget. Nullam bibendum justo
 eros, in placerat est ullamcorper nec. Donec blandit accumsan venenatis. Vivamus nec elit arcu. Morbi ultrices blandit sapien eget aliquam. Pellentesque placerat et libero a sodales. Donec eget erat ac velit maximus ullamcorper. Nulla laoreet
 dolor in purus sollicitudin varius. Duis eu erat ut magna lobortis rhoncus ac at lacus. Nullam in mi sed sem porttitor molestie. Aenean auctor dui in neque vulputate, in mattis purus tristique. Aliquam egestas venenatis ultricies. Nam elementum
 ante libero, nec dictum erat mollis dapibus. Phasellus pharetra euismod nibh, sit amet lobortis odio.</p>
 <p>Sed bibendum dapibus leo eu facilisis. Cras interdum malesuada diam id lobortis. Phasellus tristique odio eget placerat ornare. Phasellus nisl nulla, auctor convallis turpis tempus, molestie blandit urna. Nullam accumsan tellus massa, at tincidunt
 metus imperdiet sed. Donec sed imperdiet quam, id dignissim dolor. Curabitur mollis ultricies tempor. Morbi porttitor, turpis et dignissim aliquam, nunc lacus dignissim massa, a consequat nibh est vel turpis. Pellentesque blandit, ante vehicula
 sollicitudin imperdiet, tellus urna fringilla diam, id tempor neque augue eu nisl. Quisque eu sem posuere, vehicula risus ut, ullamcorper massa. Fusce vulputate bibendum erat, vel dapibus dui consectetur nec. Donec mauris mauris, egestas non malesuada
 non, finibus nec lacus. Duis at mauris tincidunt, accumsan augue non, vestibulum libero.</p>
 <p>Vestibulum fermentum vulputate lectus, at sollicitudin diam laoreet vitae. Aliquam erat volutpat. Nulla condimentum, arcu nec suscipit ultrices, urna tortor rutrum purus, sed mollis lacus ligula vitae justo. Duis vitae malesuada sem, eget finibus
 nibh. Etiam facilisis, urna ac blandit molestie, quam velit congue nibh, ac.</p>

 </div>
 <!-- end panel -->
 <div class="fade"></div>
 </div>
 <!-- end panel-wrapper -->

</body>

</html>

share|improve this answer

answered Aug 22 at 4:49

Akash

545212

Yes, you can easily do this using CSS only. Please refer to the code below:

* 
 box-sizing: border-box;


body 
 background-color: #646464;
 color: #fff;


header 
 background-color: rgba(0, 0, 0, 0.5);
 font-size: 1.5em;
 text-align: center;
 padding: 1em;


.panel-wrapper 
 position: relative;


.btn 
 color: #fff;
 background: #000;
 border-radius: 1.5em;
 left: 30%;
 padding: 1em;
 text-decoration: none;
 width: 40%;


.show,
.hide 
 position: absolute;
 bottom: -1em;
 z-index: 100;
 text-align: center;


.hide 
 display: none;


.show:target 
 display: none;


.show:target~.hide 
 display: block;


.show:target~.panel 
 max-height: 2000px;


.show:target~.fade 
 margin-top: 0;


.panel 
 position: relative;
 margin: 2em auto;
 width: 70%;
 max-height: 100px;
 overflow: hidden;
 transition: max-height .5s ease;


.fade 
 background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%, #646464 75%);
 height: 100px;
 margin-top: -100px;
 position: relative;

<!DOCTYPE html>
<html lang='en' class=''>

<head>
 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
</head>

<body>
 <header>CSS Only: Show More</header>
 <div class="panel-wrapper">
 <a href="#show" class="show btn" id="show">Show Full Article</a>
 <a href="#hide" class="hide btn" id="hide">Hide Full Article</a>
 <div class="panel">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra consectetur accumsan. Vestibulum vitae ipsum euismod, tempus ligula non, tempus lacus. Phasellus at pellentesque ex. Praesent at ipsum dui. Cras lectus neque, bibendum ac diam
 a, elementum tristique felis. Sed iaculis, diam at vehicula lacinia, odio urna tincidunt felis, sit amet scelerisque urna erat non leo. Pellentesque vel leo vitae tellus bibendum viverra.</p>
 <p>Donec id ultrices mi. Suspendisse potenti. Pellentesque cursus sagittis lacinia. Mauris elit sem, eleifend nec facilisis eget, fermentum sed odio. Nam aliquam massa nec leo tincidunt rhoncus. Integer tincidunt finibus tincidunt. Maecenas aliquam
 fermentum nisi, vitae mattis neque vehicula vitae.</p>
 <p>Nam orci purus, consequat sed lorem id, lacinia efficitur lorem. Vestibulum id quam ut elit congue varius. Donec justo augue, rhoncus non nisl ut, consectetur consequat velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aliquam
 auctor sapien lorem, at vestibulum justo congue vel. Duis volutpat, lorem quis tincidunt ornare, felis tortor posuere tellus, nec pretium neque velit vulputate libero.</p>
 <p>Morbi tortor tortor, auctor porttitor felis in, eleifend cursus ante. Nullam pellentesque lorem ipsum, in fringilla enim suscipit cursus. Pellentesque feugiat volutpat congue. Donec ac ante elit. Quisque ornare lacus dui, id commodo tortor lacinia
 nec. Curabitur dignissim magna sagittis neque aliquam porttitor. Aenean sit amet tincidunt risus.</p>
 <p>Cras feugiat, sapien luctus congue gravida, enim enim tristique nisl, vel porta lacus ante vitae dolor. Duis at nisl sed lectus imperdiet congue. Vestibulum pellentesque finibus ligula, sit amet elementum enim dignissim eget. Nullam bibendum justo
 eros, in placerat est ullamcorper nec. Donec blandit accumsan venenatis. Vivamus nec elit arcu. Morbi ultrices blandit sapien eget aliquam. Pellentesque placerat et libero a sodales. Donec eget erat ac velit maximus ullamcorper. Nulla laoreet
 dolor in purus sollicitudin varius. Duis eu erat ut magna lobortis rhoncus ac at lacus. Nullam in mi sed sem porttitor molestie. Aenean auctor dui in neque vulputate, in mattis purus tristique. Aliquam egestas venenatis ultricies. Nam elementum
 ante libero, nec dictum erat mollis dapibus. Phasellus pharetra euismod nibh, sit amet lobortis odio.</p>
 <p>Sed bibendum dapibus leo eu facilisis. Cras interdum malesuada diam id lobortis. Phasellus tristique odio eget placerat ornare. Phasellus nisl nulla, auctor convallis turpis tempus, molestie blandit urna. Nullam accumsan tellus massa, at tincidunt
 metus imperdiet sed. Donec sed imperdiet quam, id dignissim dolor. Curabitur mollis ultricies tempor. Morbi porttitor, turpis et dignissim aliquam, nunc lacus dignissim massa, a consequat nibh est vel turpis. Pellentesque blandit, ante vehicula
 sollicitudin imperdiet, tellus urna fringilla diam, id tempor neque augue eu nisl. Quisque eu sem posuere, vehicula risus ut, ullamcorper massa. Fusce vulputate bibendum erat, vel dapibus dui consectetur nec. Donec mauris mauris, egestas non malesuada
 non, finibus nec lacus. Duis at mauris tincidunt, accumsan augue non, vestibulum libero.</p>
 <p>Vestibulum fermentum vulputate lectus, at sollicitudin diam laoreet vitae. Aliquam erat volutpat. Nulla condimentum, arcu nec suscipit ultrices, urna tortor rutrum purus, sed mollis lacus ligula vitae justo. Duis vitae malesuada sem, eget finibus
 nibh. Etiam facilisis, urna ac blandit molestie, quam velit congue nibh, ac.</p>

 </div>
 <!-- end panel -->
 <div class="fade"></div>
 </div>
 <!-- end panel-wrapper -->

</body>

</html>

* 
 box-sizing: border-box;


body 
 background-color: #646464;
 color: #fff;


header 
 background-color: rgba(0, 0, 0, 0.5);
 font-size: 1.5em;
 text-align: center;
 padding: 1em;


.panel-wrapper 
 position: relative;


.btn 
 color: #fff;
 background: #000;
 border-radius: 1.5em;
 left: 30%;
 padding: 1em;
 text-decoration: none;
 width: 40%;


.show,
.hide 
 position: absolute;
 bottom: -1em;
 z-index: 100;
 text-align: center;


.hide 
 display: none;


.show:target 
 display: none;


.show:target~.hide 
 display: block;


.show:target~.panel 
 max-height: 2000px;


.show:target~.fade 
 margin-top: 0;


.panel 
 position: relative;
 margin: 2em auto;
 width: 70%;
 max-height: 100px;
 overflow: hidden;
 transition: max-height .5s ease;


.fade 
 background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%, #646464 75%);
 height: 100px;
 margin-top: -100px;
 position: relative;

<!DOCTYPE html>
<html lang='en' class=''>

<head>
 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
</head>

<body>
 <header>CSS Only: Show More</header>
 <div class="panel-wrapper">
 <a href="#show" class="show btn" id="show">Show Full Article</a>
 <a href="#hide" class="hide btn" id="hide">Hide Full Article</a>
 <div class="panel">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra consectetur accumsan. Vestibulum vitae ipsum euismod, tempus ligula non, tempus lacus. Phasellus at pellentesque ex. Praesent at ipsum dui. Cras lectus neque, bibendum ac diam
 a, elementum tristique felis. Sed iaculis, diam at vehicula lacinia, odio urna tincidunt felis, sit amet scelerisque urna erat non leo. Pellentesque vel leo vitae tellus bibendum viverra.</p>
 <p>Donec id ultrices mi. Suspendisse potenti. Pellentesque cursus sagittis lacinia. Mauris elit sem, eleifend nec facilisis eget, fermentum sed odio. Nam aliquam massa nec leo tincidunt rhoncus. Integer tincidunt finibus tincidunt. Maecenas aliquam
 fermentum nisi, vitae mattis neque vehicula vitae.</p>
 <p>Nam orci purus, consequat sed lorem id, lacinia efficitur lorem. Vestibulum id quam ut elit congue varius. Donec justo augue, rhoncus non nisl ut, consectetur consequat velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aliquam
 auctor sapien lorem, at vestibulum justo congue vel. Duis volutpat, lorem quis tincidunt ornare, felis tortor posuere tellus, nec pretium neque velit vulputate libero.</p>
 <p>Morbi tortor tortor, auctor porttitor felis in, eleifend cursus ante. Nullam pellentesque lorem ipsum, in fringilla enim suscipit cursus. Pellentesque feugiat volutpat congue. Donec ac ante elit. Quisque ornare lacus dui, id commodo tortor lacinia
 nec. Curabitur dignissim magna sagittis neque aliquam porttitor. Aenean sit amet tincidunt risus.</p>
 <p>Cras feugiat, sapien luctus congue gravida, enim enim tristique nisl, vel porta lacus ante vitae dolor. Duis at nisl sed lectus imperdiet congue. Vestibulum pellentesque finibus ligula, sit amet elementum enim dignissim eget. Nullam bibendum justo
 eros, in placerat est ullamcorper nec. Donec blandit accumsan venenatis. Vivamus nec elit arcu. Morbi ultrices blandit sapien eget aliquam. Pellentesque placerat et libero a sodales. Donec eget erat ac velit maximus ullamcorper. Nulla laoreet
 dolor in purus sollicitudin varius. Duis eu erat ut magna lobortis rhoncus ac at lacus. Nullam in mi sed sem porttitor molestie. Aenean auctor dui in neque vulputate, in mattis purus tristique. Aliquam egestas venenatis ultricies. Nam elementum
 ante libero, nec dictum erat mollis dapibus. Phasellus pharetra euismod nibh, sit amet lobortis odio.</p>
 <p>Sed bibendum dapibus leo eu facilisis. Cras interdum malesuada diam id lobortis. Phasellus tristique odio eget placerat ornare. Phasellus nisl nulla, auctor convallis turpis tempus, molestie blandit urna. Nullam accumsan tellus massa, at tincidunt
 metus imperdiet sed. Donec sed imperdiet quam, id dignissim dolor. Curabitur mollis ultricies tempor. Morbi porttitor, turpis et dignissim aliquam, nunc lacus dignissim massa, a consequat nibh est vel turpis. Pellentesque blandit, ante vehicula
 sollicitudin imperdiet, tellus urna fringilla diam, id tempor neque augue eu nisl. Quisque eu sem posuere, vehicula risus ut, ullamcorper massa. Fusce vulputate bibendum erat, vel dapibus dui consectetur nec. Donec mauris mauris, egestas non malesuada
 non, finibus nec lacus. Duis at mauris tincidunt, accumsan augue non, vestibulum libero.</p>
 <p>Vestibulum fermentum vulputate lectus, at sollicitudin diam laoreet vitae. Aliquam erat volutpat. Nulla condimentum, arcu nec suscipit ultrices, urna tortor rutrum purus, sed mollis lacus ligula vitae justo. Duis vitae malesuada sem, eget finibus
 nibh. Etiam facilisis, urna ac blandit molestie, quam velit congue nibh, ac.</p>

 </div>
 <!-- end panel -->
 <div class="fade"></div>
 </div>
 <!-- end panel-wrapper -->

</body>

</html>

* 
 box-sizing: border-box;


body 
 background-color: #646464;
 color: #fff;


header 
 background-color: rgba(0, 0, 0, 0.5);
 font-size: 1.5em;
 text-align: center;
 padding: 1em;


.panel-wrapper 
 position: relative;


.btn 
 color: #fff;
 background: #000;
 border-radius: 1.5em;
 left: 30%;
 padding: 1em;
 text-decoration: none;
 width: 40%;


.show,
.hide 
 position: absolute;
 bottom: -1em;
 z-index: 100;
 text-align: center;


.hide 
 display: none;


.show:target 
 display: none;


.show:target~.hide 
 display: block;


.show:target~.panel 
 max-height: 2000px;


.show:target~.fade 
 margin-top: 0;


.panel 
 position: relative;
 margin: 2em auto;
 width: 70%;
 max-height: 100px;
 overflow: hidden;
 transition: max-height .5s ease;


.fade 
 background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%, #646464 75%);
 height: 100px;
 margin-top: -100px;
 position: relative;

<!DOCTYPE html>
<html lang='en' class=''>

<head>
 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
</head>

<body>
 <header>CSS Only: Show More</header>
 <div class="panel-wrapper">
 <a href="#show" class="show btn" id="show">Show Full Article</a>
 <a href="#hide" class="hide btn" id="hide">Hide Full Article</a>
 <div class="panel">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra consectetur accumsan. Vestibulum vitae ipsum euismod, tempus ligula non, tempus lacus. Phasellus at pellentesque ex. Praesent at ipsum dui. Cras lectus neque, bibendum ac diam
 a, elementum tristique felis. Sed iaculis, diam at vehicula lacinia, odio urna tincidunt felis, sit amet scelerisque urna erat non leo. Pellentesque vel leo vitae tellus bibendum viverra.</p>
 <p>Donec id ultrices mi. Suspendisse potenti. Pellentesque cursus sagittis lacinia. Mauris elit sem, eleifend nec facilisis eget, fermentum sed odio. Nam aliquam massa nec leo tincidunt rhoncus. Integer tincidunt finibus tincidunt. Maecenas aliquam
 fermentum nisi, vitae mattis neque vehicula vitae.</p>
 <p>Nam orci purus, consequat sed lorem id, lacinia efficitur lorem. Vestibulum id quam ut elit congue varius. Donec justo augue, rhoncus non nisl ut, consectetur consequat velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aliquam
 auctor sapien lorem, at vestibulum justo congue vel. Duis volutpat, lorem quis tincidunt ornare, felis tortor posuere tellus, nec pretium neque velit vulputate libero.</p>
 <p>Morbi tortor tortor, auctor porttitor felis in, eleifend cursus ante. Nullam pellentesque lorem ipsum, in fringilla enim suscipit cursus. Pellentesque feugiat volutpat congue. Donec ac ante elit. Quisque ornare lacus dui, id commodo tortor lacinia
 nec. Curabitur dignissim magna sagittis neque aliquam porttitor. Aenean sit amet tincidunt risus.</p>
 <p>Cras feugiat, sapien luctus congue gravida, enim enim tristique nisl, vel porta lacus ante vitae dolor. Duis at nisl sed lectus imperdiet congue. Vestibulum pellentesque finibus ligula, sit amet elementum enim dignissim eget. Nullam bibendum justo
 eros, in placerat est ullamcorper nec. Donec blandit accumsan venenatis. Vivamus nec elit arcu. Morbi ultrices blandit sapien eget aliquam. Pellentesque placerat et libero a sodales. Donec eget erat ac velit maximus ullamcorper. Nulla laoreet
 dolor in purus sollicitudin varius. Duis eu erat ut magna lobortis rhoncus ac at lacus. Nullam in mi sed sem porttitor molestie. Aenean auctor dui in neque vulputate, in mattis purus tristique. Aliquam egestas venenatis ultricies. Nam elementum
 ante libero, nec dictum erat mollis dapibus. Phasellus pharetra euismod nibh, sit amet lobortis odio.</p>
 <p>Sed bibendum dapibus leo eu facilisis. Cras interdum malesuada diam id lobortis. Phasellus tristique odio eget placerat ornare. Phasellus nisl nulla, auctor convallis turpis tempus, molestie blandit urna. Nullam accumsan tellus massa, at tincidunt
 metus imperdiet sed. Donec sed imperdiet quam, id dignissim dolor. Curabitur mollis ultricies tempor. Morbi porttitor, turpis et dignissim aliquam, nunc lacus dignissim massa, a consequat nibh est vel turpis. Pellentesque blandit, ante vehicula
 sollicitudin imperdiet, tellus urna fringilla diam, id tempor neque augue eu nisl. Quisque eu sem posuere, vehicula risus ut, ullamcorper massa. Fusce vulputate bibendum erat, vel dapibus dui consectetur nec. Donec mauris mauris, egestas non malesuada
 non, finibus nec lacus. Duis at mauris tincidunt, accumsan augue non, vestibulum libero.</p>
 <p>Vestibulum fermentum vulputate lectus, at sollicitudin diam laoreet vitae. Aliquam erat volutpat. Nulla condimentum, arcu nec suscipit ultrices, urna tortor rutrum purus, sed mollis lacus ligula vitae justo. Duis vitae malesuada sem, eget finibus
 nibh. Etiam facilisis, urna ac blandit molestie, quam velit congue nibh, ac.</p>

 </div>
 <!-- end panel -->
 <div class="fade"></div>
 </div>
 <!-- end panel-wrapper -->

</body>

</html>

share|improve this answer

answered Aug 22 at 4:49

Akash

545212

share|improve this answer

share|improve this answer

answered Aug 22 at 4:49

Akash

545212

answered Aug 22 at 4:49

Akash

545212

answered Aug 22 at 4:49

Akash

545212

545212

add a comment | 

add a comment | 

up vote
11
down vote

You could hide a checkbox, but allow it to be checked/unchecked via its associated <label> element.

Based on whether the checkbox is checked or not, you can hide/show the additional text, and even change the text of the label from "More" to "Less".

I've included some additional details in the CSS so that each definition's intentions can be a bit more clear.

1. With one toggle "More" / "Less" button:

.more-text, #more-checkbox /* Hide the second paragraph and checkbox */
 display: none;


input:checked ~ .more-text /* Show the second paragraph when checked */
 display: block;


.more-label::after /* Label underline, hand cursor, color */
 cursor: pointer;
 text-decoration: underline;
 color: #666;


input ~ .more-label::after /* Set label text to "More" by default */
 content: 'More';


input:checked ~ .more-label::after /* Set label text to "Less" when checked */
 content: 'Less';

<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.
</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox"></label>

<p class="more-text">
 Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

---

2. With "More" button at the top and "Less" button at the bottom:

.more-text, #more-checkbox, .less-label 
 display: none;


.more-label, .less-label 
 cursor: pointer;
 text-decoration: underline; 
 color: #666;


input:checked ~ .more-text, input:checked ~ .less-label 
 display: block;


input:checked ~ .more-label 
 display: none;

<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox">More</label>

<p class="more-text">
 Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

<label class="less-label" for="more-checkbox">Less</label>

share|improve this answer

edited Aug 22 at 4:38

answered Aug 22 at 4:11

Tyler Roper

10.8k11636

add a comment | 

up vote
11
down vote

You could hide a checkbox, but allow it to be checked/unchecked via its associated <label> element.

Based on whether the checkbox is checked or not, you can hide/show the additional text, and even change the text of the label from "More" to "Less".

I've included some additional details in the CSS so that each definition's intentions can be a bit more clear.

1. With one toggle "More" / "Less" button:

.more-text, #more-checkbox /* Hide the second paragraph and checkbox */
 display: none;


input:checked ~ .more-text /* Show the second paragraph when checked */
 display: block;


.more-label::after /* Label underline, hand cursor, color */
 cursor: pointer;
 text-decoration: underline;
 color: #666;


input ~ .more-label::after /* Set label text to "More" by default */
 content: 'More';


input:checked ~ .more-label::after /* Set label text to "Less" when checked */
 content: 'Less';

<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.
</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox"></label>

<p class="more-text">
 Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

---

2. With "More" button at the top and "Less" button at the bottom:

.more-text, #more-checkbox, .less-label 
 display: none;


.more-label, .less-label 
 cursor: pointer;
 text-decoration: underline; 
 color: #666;


input:checked ~ .more-text, input:checked ~ .less-label 
 display: block;


input:checked ~ .more-label 
 display: none;

<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox">More</label>

<p class="more-text">
 Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

<label class="less-label" for="more-checkbox">Less</label>

share|improve this answer

edited Aug 22 at 4:38

answered Aug 22 at 4:11

Tyler Roper

10.8k11636

add a comment | 

up vote
11
down vote

up vote
11
down vote

You could hide a checkbox, but allow it to be checked/unchecked via its associated <label> element.

Based on whether the checkbox is checked or not, you can hide/show the additional text, and even change the text of the label from "More" to "Less".

I've included some additional details in the CSS so that each definition's intentions can be a bit more clear.

1. With one toggle "More" / "Less" button:

.more-text, #more-checkbox /* Hide the second paragraph and checkbox */
 display: none;


input:checked ~ .more-text /* Show the second paragraph when checked */
 display: block;


.more-label::after /* Label underline, hand cursor, color */
 cursor: pointer;
 text-decoration: underline;
 color: #666;


input ~ .more-label::after /* Set label text to "More" by default */
 content: 'More';


input:checked ~ .more-label::after /* Set label text to "Less" when checked */
 content: 'Less';

<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.
</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox"></label>

<p class="more-text">
 Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

---

2. With "More" button at the top and "Less" button at the bottom:

.more-text, #more-checkbox, .less-label 
 display: none;


.more-label, .less-label 
 cursor: pointer;
 text-decoration: underline; 
 color: #666;


input:checked ~ .more-text, input:checked ~ .less-label 
 display: block;


input:checked ~ .more-label 
 display: none;

<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox">More</label>

<p class="more-text">
 Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

<label class="less-label" for="more-checkbox">Less</label>

share|improve this answer

edited Aug 22 at 4:38

answered Aug 22 at 4:11

Tyler Roper

10.8k11636

You could hide a checkbox, but allow it to be checked/unchecked via its associated <label> element.

Based on whether the checkbox is checked or not, you can hide/show the additional text, and even change the text of the label from "More" to "Less".

I've included some additional details in the CSS so that each definition's intentions can be a bit more clear.

1. With one toggle "More" / "Less" button:

.more-text, #more-checkbox /* Hide the second paragraph and checkbox */
 display: none;


input:checked ~ .more-text /* Show the second paragraph when checked */
 display: block;


.more-label::after /* Label underline, hand cursor, color */
 cursor: pointer;
 text-decoration: underline;
 color: #666;


input ~ .more-label::after /* Set label text to "More" by default */
 content: 'More';


input:checked ~ .more-label::after /* Set label text to "Less" when checked */
 content: 'Less';

<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.
</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox"></label>

<p class="more-text">
 Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

---

2. With "More" button at the top and "Less" button at the bottom:

.more-text, #more-checkbox, .less-label 
 display: none;


.more-label, .less-label 
 cursor: pointer;
 text-decoration: underline; 
 color: #666;


input:checked ~ .more-text, input:checked ~ .less-label 
 display: block;


input:checked ~ .more-label 
 display: none;

<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox">More</label>

<p class="more-text">
 Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

<label class="less-label" for="more-checkbox">Less</label>

.more-text, #more-checkbox /* Hide the second paragraph and checkbox */
 display: none;


input:checked ~ .more-text /* Show the second paragraph when checked */
 display: block;


.more-label::after /* Label underline, hand cursor, color */
 cursor: pointer;
 text-decoration: underline;
 color: #666;


input ~ .more-label::after /* Set label text to "More" by default */
 content: 'More';


input:checked ~ .more-label::after /* Set label text to "Less" when checked */
 content: 'Less';

<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.
</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox"></label>

<p class="more-text">
 Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

.more-text, #more-checkbox /* Hide the second paragraph and checkbox */
 display: none;


input:checked ~ .more-text /* Show the second paragraph when checked */
 display: block;


.more-label::after /* Label underline, hand cursor, color */
 cursor: pointer;
 text-decoration: underline;
 color: #666;


input ~ .more-label::after /* Set label text to "More" by default */
 content: 'More';


input:checked ~ .more-label::after /* Set label text to "Less" when checked */
 content: 'Less';

<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.
</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox"></label>

<p class="more-text">
 Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

.more-text, #more-checkbox, .less-label 
 display: none;


.more-label, .less-label 
 cursor: pointer;
 text-decoration: underline; 
 color: #666;


input:checked ~ .more-text, input:checked ~ .less-label 
 display: block;


input:checked ~ .more-label 
 display: none;

<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox">More</label>

<p class="more-text">
 Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

<label class="less-label" for="more-checkbox">Less</label>

.more-text, #more-checkbox, .less-label 
 display: none;


.more-label, .less-label 
 cursor: pointer;
 text-decoration: underline; 
 color: #666;


input:checked ~ .more-text, input:checked ~ .less-label 
 display: block;


input:checked ~ .more-label 
 display: none;

<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox">More</label>

<p class="more-text">
 Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

<label class="less-label" for="more-checkbox">Less</label>

share|improve this answer

edited Aug 22 at 4:38

answered Aug 22 at 4:11

Tyler Roper

10.8k11636

share|improve this answer

share|improve this answer

edited Aug 22 at 4:38

edited Aug 22 at 4:38

edited Aug 22 at 4:38

answered Aug 22 at 4:11

Tyler Roper

10.8k11636

answered Aug 22 at 4:11

Tyler Roper

10.8k11636

answered Aug 22 at 4:11

Tyler Roper

10.8k11636

10.8k11636

add a comment | 

add a comment | 

up vote
8
down vote

Technically speaking, it is possible to toggle the visibility of text based on when you click on a button or link, as shown below:

.hidden-text 
 display: none;


.toggle-text:focus + .hidden-text 
 display: block;

<p>
 This is an example with no hidden content until you... <a href="#" class="toggle-text">read more</a>!
 <span class="hidden-text">Now I'm visible!!!</span>
</p>

That being said, I do strongly recommend that you familiarize yourself with JavaScript as the solution using JavaScript for something like this is much simpler and allows for additional flexibility.

share|improve this answer

answered Aug 22 at 4:08

Adam Chubbuck

439112

• 
  
  
  

  
  

  
  
  
  
  
  

  
  This depends on the browser focusing the link when you click on it, which the standard doesn't require (at least last time I checked), and which not all browsers do (e.g., this doesn't work on Safari). Using :checked or :target instead would probably be better.
  – chridd
  Aug 22 at 22:28
  

  
  
  
  

add a comment | 

up vote
8
down vote

Technically speaking, it is possible to toggle the visibility of text based on when you click on a button or link, as shown below:

.hidden-text 
 display: none;


.toggle-text:focus + .hidden-text 
 display: block;

<p>
 This is an example with no hidden content until you... <a href="#" class="toggle-text">read more</a>!
 <span class="hidden-text">Now I'm visible!!!</span>
</p>

That being said, I do strongly recommend that you familiarize yourself with JavaScript as the solution using JavaScript for something like this is much simpler and allows for additional flexibility.

share|improve this answer

answered Aug 22 at 4:08

Adam Chubbuck

439112

• 
  
  
  

  
  

  
  
  
  
  
  

  
  This depends on the browser focusing the link when you click on it, which the standard doesn't require (at least last time I checked), and which not all browsers do (e.g., this doesn't work on Safari). Using :checked or :target instead would probably be better.
  – chridd
  Aug 22 at 22:28
  

  
  
  
  

add a comment | 

up vote
8
down vote

up vote
8
down vote

Technically speaking, it is possible to toggle the visibility of text based on when you click on a button or link, as shown below:

.hidden-text 
 display: none;


.toggle-text:focus + .hidden-text 
 display: block;

<p>
 This is an example with no hidden content until you... <a href="#" class="toggle-text">read more</a>!
 <span class="hidden-text">Now I'm visible!!!</span>
</p>

That being said, I do strongly recommend that you familiarize yourself with JavaScript as the solution using JavaScript for something like this is much simpler and allows for additional flexibility.

share|improve this answer

answered Aug 22 at 4:08

Adam Chubbuck

439112

Technically speaking, it is possible to toggle the visibility of text based on when you click on a button or link, as shown below:

.hidden-text 
 display: none;


.toggle-text:focus + .hidden-text 
 display: block;

<p>
 This is an example with no hidden content until you... <a href="#" class="toggle-text">read more</a>!
 <span class="hidden-text">Now I'm visible!!!</span>
</p>

That being said, I do strongly recommend that you familiarize yourself with JavaScript as the solution using JavaScript for something like this is much simpler and allows for additional flexibility.

.hidden-text 
 display: none;


.toggle-text:focus + .hidden-text 
 display: block;

<p>
 This is an example with no hidden content until you... <a href="#" class="toggle-text">read more</a>!
 <span class="hidden-text">Now I'm visible!!!</span>
</p>

.hidden-text 
 display: none;


.toggle-text:focus + .hidden-text 
 display: block;

<p>
 This is an example with no hidden content until you... <a href="#" class="toggle-text">read more</a>!
 <span class="hidden-text">Now I'm visible!!!</span>
</p>

share|improve this answer

answered Aug 22 at 4:08

Adam Chubbuck

439112

share|improve this answer

share|improve this answer

answered Aug 22 at 4:08

Adam Chubbuck

439112

answered Aug 22 at 4:08

Adam Chubbuck

439112

answered Aug 22 at 4:08

Adam Chubbuck

439112

439112

• 
  
  
  

  
  

  
  
  
  
  
  

  
  This depends on the browser focusing the link when you click on it, which the standard doesn't require (at least last time I checked), and which not all browsers do (e.g., this doesn't work on Safari). Using :checked or :target instead would probably be better.
  – chridd
  Aug 22 at 22:28
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  This depends on the browser focusing the link when you click on it, which the standard doesn't require (at least last time I checked), and which not all browsers do (e.g., this doesn't work on Safari). Using :checked or :target instead would probably be better.
  – chridd
  Aug 22 at 22:28
  

  
  
  
  

This depends on the browser focusing the link when you click on it, which the standard doesn't require (at least last time I checked), and which not all browsers do (e.g., this doesn't work on Safari). Using :checked or :target instead would probably be better.
– chridd
Aug 22 at 22:28

This depends on the browser focusing the link when you click on it, which the standard doesn't require (at least last time I checked), and which not all browsers do (e.g., this doesn't work on Safari). Using :checked or :target instead would probably be better.
– chridd
Aug 22 at 22:28

add a comment | 

up vote
7
down vote

Yes, you can do that by using HTML and CSS only.

body padding: 20px; 

div margin-top: 10px; border: 1px solid black; width: 200px; height: 100px;
 padding: 5px;

input:checked + label + div display: none; 
input + label:after content: " To Hide"; 
input:checked + label:after content: " To Show"; 

label 
 background-color: yellow;
 box-shadow: inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -2px 3px rgba(0,0,0,0.2);
 border-radius: 4px;
 font-size: 16px;
 display: inline-block;
 padding: 2px 5px;
 cursor: pointer;

<input type='checkbox' style='display: none' id=cb>
<label for=cb>Click Here</label>
<div>
 Hello. This is some stuff.
</div>

share|improve this answer

edited Aug 22 at 16:23

Peter Mortensen

12.9k1983111

answered Aug 22 at 11:58

monir alhussini

838

• 
  
  
  

  
  3
  

  
  
  
  
  
  

  
  Hi monir alhussini, welcome to Stack Overflow. Can I make a comment about how to improve your answer? Your code works very well (at least in my browser), but with some context it would make a better answer; for example, you could explain how and why this proposed change would resolve the questioner's problem, perhaps including a link to the relevant documentation. That would make it more useful to them, and also more useful to other site readers who are looking for solutions to similar problems.
  – Vince Bowdren
  Aug 23 at 10:30
  

  
  
  
  

add a comment | 

up vote
7
down vote

Yes, you can do that by using HTML and CSS only.

body padding: 20px; 

div margin-top: 10px; border: 1px solid black; width: 200px; height: 100px;
 padding: 5px;

input:checked + label + div display: none; 
input + label:after content: " To Hide"; 
input:checked + label:after content: " To Show"; 

label 
 background-color: yellow;
 box-shadow: inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -2px 3px rgba(0,0,0,0.2);
 border-radius: 4px;
 font-size: 16px;
 display: inline-block;
 padding: 2px 5px;
 cursor: pointer;

<input type='checkbox' style='display: none' id=cb>
<label for=cb>Click Here</label>
<div>
 Hello. This is some stuff.
</div>

share|improve this answer

edited Aug 22 at 16:23

Peter Mortensen

12.9k1983111

answered Aug 22 at 11:58

monir alhussini

838

• 
  
  
  

  
  3
  

  
  
  
  
  
  

  
  Hi monir alhussini, welcome to Stack Overflow. Can I make a comment about how to improve your answer? Your code works very well (at least in my browser), but with some context it would make a better answer; for example, you could explain how and why this proposed change would resolve the questioner's problem, perhaps including a link to the relevant documentation. That would make it more useful to them, and also more useful to other site readers who are looking for solutions to similar problems.
  – Vince Bowdren
  Aug 23 at 10:30
  

  
  
  
  

add a comment | 

up vote
7
down vote

up vote
7
down vote

Yes, you can do that by using HTML and CSS only.

body padding: 20px; 

div margin-top: 10px; border: 1px solid black; width: 200px; height: 100px;
 padding: 5px;

input:checked + label + div display: none; 
input + label:after content: " To Hide"; 
input:checked + label:after content: " To Show"; 

label 
 background-color: yellow;
 box-shadow: inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -2px 3px rgba(0,0,0,0.2);
 border-radius: 4px;
 font-size: 16px;
 display: inline-block;
 padding: 2px 5px;
 cursor: pointer;

<input type='checkbox' style='display: none' id=cb>
<label for=cb>Click Here</label>
<div>
 Hello. This is some stuff.
</div>

share|improve this answer

edited Aug 22 at 16:23

Peter Mortensen

12.9k1983111

answered Aug 22 at 11:58

monir alhussini

838

Yes, you can do that by using HTML and CSS only.

body padding: 20px; 

div margin-top: 10px; border: 1px solid black; width: 200px; height: 100px;
 padding: 5px;

input:checked + label + div display: none; 
input + label:after content: " To Hide"; 
input:checked + label:after content: " To Show"; 

label 
 background-color: yellow;
 box-shadow: inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -2px 3px rgba(0,0,0,0.2);
 border-radius: 4px;
 font-size: 16px;
 display: inline-block;
 padding: 2px 5px;
 cursor: pointer;

<input type='checkbox' style='display: none' id=cb>
<label for=cb>Click Here</label>
<div>
 Hello. This is some stuff.
</div>

body padding: 20px; 

div margin-top: 10px; border: 1px solid black; width: 200px; height: 100px;
 padding: 5px;

input:checked + label + div display: none; 
input + label:after content: " To Hide"; 
input:checked + label:after content: " To Show"; 

label 
 background-color: yellow;
 box-shadow: inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -2px 3px rgba(0,0,0,0.2);
 border-radius: 4px;
 font-size: 16px;
 display: inline-block;
 padding: 2px 5px;
 cursor: pointer;

<input type='checkbox' style='display: none' id=cb>
<label for=cb>Click Here</label>
<div>
 Hello. This is some stuff.
</div>

body padding: 20px; 

div margin-top: 10px; border: 1px solid black; width: 200px; height: 100px;
 padding: 5px;

input:checked + label + div display: none; 
input + label:after content: " To Hide"; 
input:checked + label:after content: " To Show"; 

label 
 background-color: yellow;
 box-shadow: inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -2px 3px rgba(0,0,0,0.2);
 border-radius: 4px;
 font-size: 16px;
 display: inline-block;
 padding: 2px 5px;
 cursor: pointer;

<input type='checkbox' style='display: none' id=cb>
<label for=cb>Click Here</label>
<div>
 Hello. This is some stuff.
</div>

share|improve this answer

edited Aug 22 at 16:23

Peter Mortensen

12.9k1983111

answered Aug 22 at 11:58

monir alhussini

838

share|improve this answer

share|improve this answer

edited Aug 22 at 16:23

Peter Mortensen

12.9k1983111

edited Aug 22 at 16:23

Peter Mortensen

12.9k1983111

edited Aug 22 at 16:23

Peter Mortensen

12.9k1983111

12.9k1983111

answered Aug 22 at 11:58

monir alhussini

838

answered Aug 22 at 11:58

monir alhussini

838

answered Aug 22 at 11:58

monir alhussini

838

838

• 
  
  
  

  
  3
  

  
  
  
  
  
  

  
  Hi monir alhussini, welcome to Stack Overflow. Can I make a comment about how to improve your answer? Your code works very well (at least in my browser), but with some context it would make a better answer; for example, you could explain how and why this proposed change would resolve the questioner's problem, perhaps including a link to the relevant documentation. That would make it more useful to them, and also more useful to other site readers who are looking for solutions to similar problems.
  – Vince Bowdren
  Aug 23 at 10:30
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  3
  

  
  
  
  
  
  

  
  Hi monir alhussini, welcome to Stack Overflow. Can I make a comment about how to improve your answer? Your code works very well (at least in my browser), but with some context it would make a better answer; for example, you could explain how and why this proposed change would resolve the questioner's problem, perhaps including a link to the relevant documentation. That would make it more useful to them, and also more useful to other site readers who are looking for solutions to similar problems.
  – Vince Bowdren
  Aug 23 at 10:30
  

  
  
  
  

3

3

Hi monir alhussini, welcome to Stack Overflow. Can I make a comment about how to improve your answer? Your code works very well (at least in my browser), but with some context it would make a better answer; for example, you could explain how and why this proposed change would resolve the questioner's problem, perhaps including a link to the relevant documentation. That would make it more useful to them, and also more useful to other site readers who are looking for solutions to similar problems.
– Vince Bowdren
Aug 23 at 10:30

Hi monir alhussini, welcome to Stack Overflow. Can I make a comment about how to improve your answer? Your code works very well (at least in my browser), but with some context it would make a better answer; for example, you could explain how and why this proposed change would resolve the questioner's problem, perhaps including a link to the relevant documentation. That would make it more useful to them, and also more useful to other site readers who are looking for solutions to similar problems.
– Vince Bowdren
Aug 23 at 10:30

add a comment | 

up vote
2
down vote

now you can hide/show text using only CSS too!
If you are using text input and want to show/hide text based on the state of the input box, you can use the new CSS pseudo-class :placeholder-shown for <input> or <textarea>.
Here is an example/demo of the above-mentioned pseudo-class!:

/* Some base style */

.app 
 margin: 50px auto;
 padding: 50px;


code 
 background-color: lightgray;
 padding: 4px;


input 
 padding: 5px 10px;


input:focus 
 outline: none;



/* When there is something in input box give 
 it a solid blue border */

input:not(:placeholder-shown) 
 border: solid 2px #42A5F5



/* Hide the p initially */

p 
 background-color: #F0F4C3;
 padding: 5px;
 opacity: 0;
 transition: all 300ms ease-in-out;



/* Show the p when the placeholder is not shown. 
 i.e. Something is in the input box and placeholder is gone */

input:not(:placeholder-shown)+p 
 opacity: 1

<div class="app">
 <h1>Hide/Show Text using input's <code>:placehoder-shown</code> psuedo class!</h1>
 <label for="name">Enter your name</label>
 <input type="text" id="name" placeholder="Your Name">
 <p class="msg">Well done!</p>
</div>

Here is Link to MDN Docs.

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

share|improve this answer

answered Aug 29 at 15:02

Hiren

3051417

add a comment | 

up vote
2
down vote

now you can hide/show text using only CSS too!
If you are using text input and want to show/hide text based on the state of the input box, you can use the new CSS pseudo-class :placeholder-shown for <input> or <textarea>.
Here is an example/demo of the above-mentioned pseudo-class!:

/* Some base style */

.app 
 margin: 50px auto;
 padding: 50px;


code 
 background-color: lightgray;
 padding: 4px;


input 
 padding: 5px 10px;


input:focus 
 outline: none;



/* When there is something in input box give 
 it a solid blue border */

input:not(:placeholder-shown) 
 border: solid 2px #42A5F5



/* Hide the p initially */

p 
 background-color: #F0F4C3;
 padding: 5px;
 opacity: 0;
 transition: all 300ms ease-in-out;



/* Show the p when the placeholder is not shown. 
 i.e. Something is in the input box and placeholder is gone */

input:not(:placeholder-shown)+p 
 opacity: 1

<div class="app">
 <h1>Hide/Show Text using input's <code>:placehoder-shown</code> psuedo class!</h1>
 <label for="name">Enter your name</label>
 <input type="text" id="name" placeholder="Your Name">
 <p class="msg">Well done!</p>
</div>

Here is Link to MDN Docs.

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

share|improve this answer

answered Aug 29 at 15:02

Hiren

3051417

add a comment | 

up vote
2
down vote

up vote
2
down vote

now you can hide/show text using only CSS too!
If you are using text input and want to show/hide text based on the state of the input box, you can use the new CSS pseudo-class :placeholder-shown for <input> or <textarea>.
Here is an example/demo of the above-mentioned pseudo-class!:

/* Some base style */

.app 
 margin: 50px auto;
 padding: 50px;


code 
 background-color: lightgray;
 padding: 4px;


input 
 padding: 5px 10px;


input:focus 
 outline: none;



/* When there is something in input box give 
 it a solid blue border */

input:not(:placeholder-shown) 
 border: solid 2px #42A5F5



/* Hide the p initially */

p 
 background-color: #F0F4C3;
 padding: 5px;
 opacity: 0;
 transition: all 300ms ease-in-out;



/* Show the p when the placeholder is not shown. 
 i.e. Something is in the input box and placeholder is gone */

input:not(:placeholder-shown)+p 
 opacity: 1

<div class="app">
 <h1>Hide/Show Text using input's <code>:placehoder-shown</code> psuedo class!</h1>
 <label for="name">Enter your name</label>
 <input type="text" id="name" placeholder="Your Name">
 <p class="msg">Well done!</p>
</div>

Here is Link to MDN Docs.

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

share|improve this answer

answered Aug 29 at 15:02

Hiren

3051417

now you can hide/show text using only CSS too!
If you are using text input and want to show/hide text based on the state of the input box, you can use the new CSS pseudo-class :placeholder-shown for <input> or <textarea>.
Here is an example/demo of the above-mentioned pseudo-class!:

/* Some base style */

.app 
 margin: 50px auto;
 padding: 50px;


code 
 background-color: lightgray;
 padding: 4px;


input 
 padding: 5px 10px;


input:focus 
 outline: none;



/* When there is something in input box give 
 it a solid blue border */

input:not(:placeholder-shown) 
 border: solid 2px #42A5F5



/* Hide the p initially */

p 
 background-color: #F0F4C3;
 padding: 5px;
 opacity: 0;
 transition: all 300ms ease-in-out;



/* Show the p when the placeholder is not shown. 
 i.e. Something is in the input box and placeholder is gone */

input:not(:placeholder-shown)+p 
 opacity: 1

<div class="app">
 <h1>Hide/Show Text using input's <code>:placehoder-shown</code> psuedo class!</h1>
 <label for="name">Enter your name</label>
 <input type="text" id="name" placeholder="Your Name">
 <p class="msg">Well done!</p>
</div>

Here is Link to MDN Docs.

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

/* Some base style */

.app 
 margin: 50px auto;
 padding: 50px;


code 
 background-color: lightgray;
 padding: 4px;


input 
 padding: 5px 10px;


input:focus 
 outline: none;



/* When there is something in input box give 
 it a solid blue border */

input:not(:placeholder-shown) 
 border: solid 2px #42A5F5



/* Hide the p initially */

p 
 background-color: #F0F4C3;
 padding: 5px;
 opacity: 0;
 transition: all 300ms ease-in-out;



/* Show the p when the placeholder is not shown. 
 i.e. Something is in the input box and placeholder is gone */

input:not(:placeholder-shown)+p 
 opacity: 1

<div class="app">
 <h1>Hide/Show Text using input's <code>:placehoder-shown</code> psuedo class!</h1>
 <label for="name">Enter your name</label>
 <input type="text" id="name" placeholder="Your Name">
 <p class="msg">Well done!</p>
</div>

/* Some base style */

.app 
 margin: 50px auto;
 padding: 50px;


code 
 background-color: lightgray;
 padding: 4px;


input 
 padding: 5px 10px;


input:focus 
 outline: none;



/* When there is something in input box give 
 it a solid blue border */

input:not(:placeholder-shown) 
 border: solid 2px #42A5F5



/* Hide the p initially */

p 
 background-color: #F0F4C3;
 padding: 5px;
 opacity: 0;
 transition: all 300ms ease-in-out;



/* Show the p when the placeholder is not shown. 
 i.e. Something is in the input box and placeholder is gone */

input:not(:placeholder-shown)+p 
 opacity: 1

<div class="app">
 <h1>Hide/Show Text using input's <code>:placehoder-shown</code> psuedo class!</h1>
 <label for="name">Enter your name</label>
 <input type="text" id="name" placeholder="Your Name">
 <p class="msg">Well done!</p>
</div>

share|improve this answer

answered Aug 29 at 15:02

Hiren

3051417

share|improve this answer

share|improve this answer

answered Aug 29 at 15:02

Hiren

3051417

answered Aug 29 at 15:02

Hiren

3051417

answered Aug 29 at 15:02

Hiren

3051417

3051417

add a comment | 

add a comment | 

up vote
-2
down vote

Use "display: none;" attribute.

share|improve this answer

answered Aug 24 at 21:32

Ajay Munugala

152

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Hi @Ajay, thanks for your contribution. However, you seem to have only answered half the question: you've shown how to hide it, but not how to unhide it, and switch between the two states with CSS
  – Charlie Harding
  Aug 29 at 9:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  display: block; will unhide it.
  – Ajay Munugala
  Aug 30 at 19:27
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  And how do you use CSS to handle a click, to switch between the states, as the question is asking?
  – Charlie Harding
  Aug 31 at 15:14
  

  
  
  
  

add a comment | 

up vote
-2
down vote

Use "display: none;" attribute.

share|improve this answer

answered Aug 24 at 21:32

Ajay Munugala

152

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Hi @Ajay, thanks for your contribution. However, you seem to have only answered half the question: you've shown how to hide it, but not how to unhide it, and switch between the two states with CSS
  – Charlie Harding
  Aug 29 at 9:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  display: block; will unhide it.
  – Ajay Munugala
  Aug 30 at 19:27
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  And how do you use CSS to handle a click, to switch between the states, as the question is asking?
  – Charlie Harding
  Aug 31 at 15:14
  

  
  
  
  

add a comment | 

up vote
-2
down vote

up vote
-2
down vote

Use "display: none;" attribute.

share|improve this answer

answered Aug 24 at 21:32

Ajay Munugala

152

Use "display: none;" attribute.

share|improve this answer

answered Aug 24 at 21:32

Ajay Munugala

152

share|improve this answer

share|improve this answer

answered Aug 24 at 21:32

Ajay Munugala

152

answered Aug 24 at 21:32

Ajay Munugala

152

answered Aug 24 at 21:32

Ajay Munugala

152

152

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Hi @Ajay, thanks for your contribution. However, you seem to have only answered half the question: you've shown how to hide it, but not how to unhide it, and switch between the two states with CSS
  – Charlie Harding
  Aug 29 at 9:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  display: block; will unhide it.
  – Ajay Munugala
  Aug 30 at 19:27
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  And how do you use CSS to handle a click, to switch between the states, as the question is asking?
  – Charlie Harding
  Aug 31 at 15:14
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Hi @Ajay, thanks for your contribution. However, you seem to have only answered half the question: you've shown how to hide it, but not how to unhide it, and switch between the two states with CSS
  – Charlie Harding
  Aug 29 at 9:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  display: block; will unhide it.
  – Ajay Munugala
  Aug 30 at 19:27
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  And how do you use CSS to handle a click, to switch between the states, as the question is asking?
  – Charlie Harding
  Aug 31 at 15:14
  

  
  
  
  

Hi @Ajay, thanks for your contribution. However, you seem to have only answered half the question: you've shown how to hide it, but not how to unhide it, and switch between the two states with CSS
– Charlie Harding
Aug 29 at 9:31

Hi @Ajay, thanks for your contribution. However, you seem to have only answered half the question: you've shown how to hide it, but not how to unhide it, and switch between the two states with CSS
– Charlie Harding
Aug 29 at 9:31

display: block; will unhide it.
– Ajay Munugala
Aug 30 at 19:27

display: block; will unhide it.
– Ajay Munugala
Aug 30 at 19:27

And how do you use CSS to handle a click, to switch between the states, as the question is asking?
– Charlie Harding
Aug 31 at 15:14

And how do you use CSS to handle a click, to switch between the states, as the question is asking?
– Charlie Harding
Aug 31 at 15:14

add a comment | 

 

draft saved

draft discarded

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f51959677%2fcan-text-be-hidden-and-shown-using-just-css-no-javascript-code%23new-answer', 'question_page');

);

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Name Email

Name

Email

Name Email

Name

Email