I am creating a new website where the designer and the client want visitors to be able to click on a paragraph and more details to be displayed. I’m not particularly keen but it’s what the client wants and as we all know the client is always right. 
I have a rather mickey mouse JS solution which works, although it could probably be improved(?) However, I would prefer a non-JS solution but can’t seem to find one.
A test page is here.
Can anyone help?
It can be done css only using the :target pseudo class to show/hide or otherwise alter appearance via css.
Eg:-
#thisThing { display: none }
#thisThing:target { display: block }
Then you just need a link to that element to trigger the unhide. Yes, you need to use IDs for this.
Thanks Sam. I’ve not come across :target before. I’ll give it a bash. I may be back…
The html to go with that may be something like:-
<a href="#thisThing">Show your thing</a>
<div id="thisThing">
<h2>A Thing</h2>
<p>Lorem ipsum.</p>
</div>
So that div is hidden until you click the link and it becomes the target and appears.
Hi there gandalf458,
here is another possible solution for you to test…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
#column1 {
width:33.3%;
}
input[type="checkbox"] {
position: absolute;
left: -999em;
}
label {
display: block;
margin: 1em 0;
}
#hidden0,#hidden1 {
max-height:0;
overflow: hidden;
}
#cb0:checked~#hidden0 {
max-height:100%;
}
#cb1:checked~#hidden1 {
max-height:100%;
}
</style>
</head>
<body>
<div id="column1">
<input id="cb0" type="checkbox">
<input id="cb1" type="checkbox">
<label for="cb0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero
bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh,
posuere ac lorem ut, suscipit tincidunt leo.
</label>
<div id="hidden0">
<p>
Duis interdum justo ac justo vehicula consequat.
Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta,
sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo
odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur
purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p>
</div>
<label for="cb1">
Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra
purus vitae lobortis. Sed et libero non diam tempor sagittis. Quisque vel egestas ipsum.
Integer sed elit eu orci blandit commodo in in erat.
</label>
<div id="hidden1">
<p>
Donec blandit, mi at gravida varius,
nulla tellus vulputate ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur tristique
varius ullamcorper.
</p>
</div>
</div>
</body>
</html>coothead
Thanks again @SamA74 and thanks @coothead. Now - I’m playing. Isn’t this fun!
Funnily enough, coothead, young man, I was thinking of the hidden checkbox method but got floored when I wanted to put a paragraph inside the label - but of course I don’t need to, just the text…
I like the checkbox method as it does not make the page “jump around” like target does. But while it works fine with the mouse, it may come with some accessibility concerns for keyboard navigation.
Here’s one more way of doing it.
<div id="show">
<p id="open">Suspendisse a dolor nulla. Praesent a egestas diam. Morbi facilisis ultricies sagittis. Donec tincidunt, turpis ac facilisis dapibus, sapien urna tincidunt justo, vitae egestas ipsum odio ac lacus. <a id="myButton" href="#show">more...</a></p>
<p id="content">Suspendisse a dolor nulla. Praesent a egestas diam. Morbi facilisis ultricies sagittis. Donec tincidunt, turpis ac facilisis dapibus, sapien urna tincidunt justo, vitae egestas ipsum odio ac lacus. Ut sit amet consectetur nunc. Maecenas ut justo vitae
nisi vulputate maximus. Phasellus eu quam faucibus, porttitor diam eu, cursus quam. Nunc non massa placerat, ornare justo ac, vulputate risus. Nunc tellus orci, efficitur ac ipsum ut, bibendum gravida lacus. Suspendisse potenti. Mauris in vehicula
lorem. Suspendisse vehicula enim ac ultricies iaculis. Etiam quis egestas arcu, vel consequat velit. Proin efficitur arcu quam, in imperdiet sapien consectetur quis. Nam at ligula erat. Suspendisse ullamcorper arcu at velit varius, id tincidunt augue
lobortis.</p>
</div>
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2rem;
line-height: 1.5;
}
a#myButton {
text-decoration: none;
color: red;
}
#open {
dipslay: inline-block;
padding: 30px;
}
#content {
display: none;
}
#show:target #content {
display: inline-block;
padding: 30px;
margin: 0;
}
#show:target #open {
display: none;
}
Here’s the jsfiddle link: https://jsfiddle.net/Strider64/10whf7L9/24/
It’s not perfect, but the css could be played around a little bit to get a better effect. It’s a neat look that I have used in the past.
Thanks @Pepster64. So many choices! The jump with the target option is a pain. I suppose it could be overcome with a little JS 
I found it interesting that @PaulOB prefes the JS option.
The method by @Pepster64 may lessen the jump effect. He makes the target the container element, so it jumps to the container start, not the “new” section of text.
For “progressive enhancement” you could back this up with js to kill the jump. Or just use js and let non-js users see the whole thing from the start. That would also support old browsers that don’t do target (if that is a concern).
Yes the problem I have with the checkbox hack (apart from accessibility) is that it doesn’t work on android so you end up with certain users getting nothing at all. There is a fix for the checkbox hack which entails adding an animation to the body element but this has been seen to clog up the processor and stop the page from working at all. Therefore until such time as this bug is fixed I tend to avoid the checkbox hack in instances where it is important to the outcome of the page.
The :target ‘hack’ is more reliable but as you can only have one target active at a time you lose the previously opened paragraph and while in some instances that may be desirable it does not aid comprehension when you may need to refer back to previous content.
For hiding and showing text I prefer the js solution because you can have text visible by default so everyone can get it (even extremely old browsers) and then truncate it with js as an enhancement.
I have an old demo below which uses jquery (but I’m sure would not take much to turn into vanilla js). It is also keyboard accessible.
I’m sure there are much better examples around but the idea is basically the same.
You can fix the jump by using fixed positioned targets but then you likely run into the android bug with the pseudoclass +/~ combinators (although I haven’t tested). 
True. This has the disadvantage of the element being visible for a split second before it is hidden. Is there any CSSy work around for that? Like a CSS fade in, by which time the element would have been hidden by JS?
To the deuce with CSS and JS. You need the <details> element!
Read more about this on MDN
Edit: D’oh, Micro$oft spoils the party again.
Ye gods! It’s not a @ralphm joke either 
Thanks Ralph.
Hah, yeah. Just updated my post, though: Can I Use reports that Microsloth doesn’t sport it. 
faints in surprise
But not the end of the world, as it will just show the contents as a block, nothing is lost.
I have to say I like the <details> tag. It’s rather neat.
Edit: Keyboarder friendly too.
You could hide the body for a second with css and hopefully eliminate seeing the jump but would depend on page content and how it is loading.
I think that on most pages these days there is so much else going on that most users would not notice or be worried about the jump.
I’m not sure there is any other way to accessibly hide random content as the number of characters to hide is determined by js once the page has loaded. I guess you could make sure the script is run as soon the content is available (rather than wait for the whole page to load) but that would be your area