"Now you see me" and keep seeing me

[hetaera]

Regarding the display: none writeup (https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/), I’d like to know how to use this more than once on a page.

For instance, I have a page of bios, and the design calls for each bio to initially only show the first paragraph, then optionally click “show more” to expand the rest.

[Paulie_D]

It’s not clear what the actual issue here is but JS/JQ will let you target individual elements for the same function.

Do you have a brief example you could show us in Codepen.io?

[hetaera]

Just picture:

Bio one. (read more)

Bio two. (read more)

etc.

The script as it is will effect all the show/hide content, instead of one treating them individually.

[Paulie_D]

I can picture it…now if you provide the code we can make a start…but your starter is with the Jquery this keyword.

http://learn.jquery.com/javascript-101/this-keyword/

[hetaera]

Ah right, that’s in the script I often use:

The problem with it though is the fact that it simply uses display: none.

[hetaera]

http://codepen.io/jessiejohnson/pen/pvbxxv

[Paulie_D]

My Jquery is poor but

http://codepen.io/Paulie-D/pen/LEZgqO?editors=001

[hetaera]

Hmm, looks close, but now they won’t close.

[Paulie_D]

I just used the script from the article linked…which, as I recall, did not include a ‘closing’ option.

It suggested a method not a complete solution.

I’m sure you can figure out a way to adapt what you have to toggle open and closed.

[hetaera]

Thanks for the help, I’ll keep at it.

[Author]

Posts