Display more text without JS

[PaulOB]

@ralphm

To the deuce with CSS and JS. You need the <details> element!

The details element looks good for toggling block content but I see no way to make it work with inline fragments such as truncating a paragraph which is a shame.

[James_Hibbard]

@PaulOB

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.

Ah nice. I was hoping something like that was possible.

@PaulOB

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.

Actually, I had someone complain about just that recently (hence my curosity). I ended up hiding the element by default and using JS to show it (which isn’t overly accessible).

Hiding a div once user has closed it

Thanks for your patience, in response to your points: I have scripts located in an external file which is why I was using the $(document).ready() Ok thanks for the advice - I was using a tutorial… I’ll keep that tip in mind in the future. Yes, I am using class rather than id as there could be more than 1 notification. I implemented your code but the issue I am now facing is the message flickers from ‘visible to hidden’ as I navigate from page to page. (fyi - the notification is located in the…

Would it make sense to use CSS here to avoid the reliance on JS?

https://www.sitepoint.com/community/t/hiding-a-div-once-user-has-closed-it/247005/5

[PaulOB]

@James_Hibbard

I ended up hiding the element by default and using JS to show it (which isn’t overly accessible).

For accessibility you could add a js class to the html element which can be done straight away before the rest of the document needs to load loads and then use that class to hide the element in the css. I use that method all the time.

e.g.
js .myElement {display:none}

I would have done the same for the above demo except its not possible as we are not hiding specific blocks as such but using a character limit to truncate the text and therefore there was nothing for the css to hook into.

If instead of counting characters we used a span around the raw html we wanted to hide then the content could be hidden initially using the js class easily.

[James_Hibbard]

I’m probably being dense, but that would still mean the element is hidden by default and only visible to those with JS enabled (or did I miss the point entirely)?

[ralphm]

@James_Hibbard

still mean the element is hidden by default and only visible to those with JS enabled

The class would be added to the HTML element by JS, so it will only take effect if JS is operating. The script would be added early on in the head, before the CSS.

[James_Hibbard]

Ah, gotchya. Right. Thanks, Ralph.

[PaulOB]

@ralphm

The class would be added to the HTML element by JS, so it will only take effect if JS is operating. The script would be added early on in the head, before the CSS.

Yes as Ralph said you just add the js snippet as the first rule in the head of the document followed by the css which means html has loaded but the body hasn’t loaded yet and therefore there is no flash of content because the css hiding rule takes effect straight away. If js in’t available the element is displayed as normal.

[James_Hibbard]

Cheers, Paul. That’s a much better way. I updated my answer in the other thread.