Muse (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
sometimesamuse) wrote2019-03-11 11:16 am
sometimesamuse) wrote2019-03-11 11:16 am
[code] Expanding and Hiding Details
Disclaimer: I'm not a code master; my skill lies in Java, not in html. But I'm sharing what I've learned just through playing around with things. Yes I know my tables are a mess.
The details code is what gives you those fun little click to expand/click to hide sections in a post. This is what the code looks like:
After replacing « and » with < and >, it looks like this:
lots of text goes here
lots and lots of text
lots and lots and lots of text
lots and lots and lots and lots of text
you get the idea
You can play with text transformations from there if you want; I tend to make my section headers bold and in a larger font size than the section text. You can add underlines or indent your sections if you like, whatever floats your boat. Here's an example of the code dressed up a little:
Which gives you this:
lots of text goes here
lots and lots of text
lots and lots and lots of text
lots and lots and lots and lots of text
you get the idea
Lastly, if you want a section to be open by default and you click to close it, use «details open» instead of «details».
The details code is what gives you those fun little click to expand/click to hide sections in a post. This is what the code looks like:
| «details»«summary»Section Title:«/summary» lots of text goes here lots and lots of text lots and lots and lots of text lots and lots and lots and lots of text you get the idea «/details» |
That code is here: |
After replacing « and » with < and >, it looks like this:
Section Title:
lots of text goes here
lots and lots of text
lots and lots and lots of text
lots and lots and lots and lots of text
you get the idea
You can play with text transformations from there if you want; I tend to make my section headers bold and in a larger font size than the section text. You can add underlines or indent your sections if you like, whatever floats your boat. Here's an example of the code dressed up a little:
| «details»«summary style="font-family: courier; font-size: 18pt; color: #9d46ff; letter-spacing: 5px; border-bottom: 4px double #000000;" »Section Title:«/summary» «div style="margin: auto; width: 95%"» lots of text goes here lots and lots of text lots and lots and lots of text lots and lots and lots and lots of text you get the idea «/div»«/details» |
That code is here: |
Which gives you this:
Section Title:
lots of text goes here
lots and lots of text
lots and lots and lots of text
lots and lots and lots and lots of text
you get the idea
Lastly, if you want a section to be open by default and you click to close it, use «details open» instead of «details».
no subject
/adds post to memories