I'm a total newbie to all things CSS, and want to create sections on my wiki that can expand or collapse with a click. I found this code...
<p>Here's a list</p>
<div>
<a href="#" class="hide1">hide</a>
<a href="#" class="show1">show</a>
<ol class="list1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</div>
<p>How about that?</p>
.show1 {display: none; }
.hide1:focus + .show1 {display: inline; }
.hide1:focus { display: none; }
.hide1:focus ~ .list1 { display:none; }
@media print { .hide1, .show1 { display: none; } }
...and it's worked great. There are two more things I want it to do with it:
1. Make the text hidden by default so I have to click "show" to reveal it. As-is, the text is already visible, and I have to click "hide" to make it invisible.
2. Remove the line that by the visibile text that says "1."
Any idea how I might finagle this? Thanks!
Blood & Bourbon, 2017 Campaign of the Year
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
That code looks familiar. Using the least amount of changes you'd basically do the following
make .list1 not be displayed, and set the list-style type to none to get rid of the 1. whether you want to set the margin and padding back to 0 is up to you.
then when hide1 has the focus display list 1
now this will mean show1 is really causing things to be hidden and hide1 is causing things to be shown, but you can rename the classes as you wish afterwards.
Here is an example of it
https://dead-men-tell-no-tales.obsidianportal.com/wikis/testpopup
edit
I figured I might expand on this a bit (since I don't know your level of CSS knowledge)
You don't need to you an ol (ordered list) like in the example above you could use a p (paragraph) or a div or really anything that can be a class and call that class list1 (or whatever). In which case you don't need to even say list-style-type: none since you aren't using a list at that point it is a paragraph or a div. And if you aren't using an ol than you don't need the li (list items)
For example you could also get rid of the "1." by changing the ol to a div and the li to p in your html
They are among us!
XCom: Defiance - Campaign of the Month November 2016
That did exactly what I wanted. Thank you so much!
Blood & Bourbon, 2017 Campaign of the Year
Just tossing this out there in case it is important, but trying to use the test page @cgregory linked doesn't work for me in Chrome though it does in Firefox. Might be something to keep in mind if any of your players use Chrome to view the site since those bits won't work for them.
-Red
Campaigns: Dragon Age: Requiem
Same
GM: https://knights-of-the-realm-1.obsidianportal.com/ - a Greater Pendragon Campaign
GM: https://sagaofthenorth..obsidianportal.com/ - a Dungeon World Campaign
Player/Scribe: https://thepriceofimmortality.obsidianportal.com/ - a Pathfinder Campaign
"The object of life is not to be on the side of the majority, but to escape finding oneself in the ranks of the insane." - Marcus Aurelius
Yes, chrome has a long history of having issues with the focus pseudo class on and off throughout the years. Even adding in a tabindex and acquiring focus through the use of tab causes the issue. But even code where the focus works with chrome, it doesn't seem to work here on OP.
You could the hover pseudo class if your group uses chrome. Hell, you can even have a little more fun and use hover plus an animation that only runs when you hover over the Show button.
They are among us!
XCom: Defiance - Campaign of the Month November 2016