Hidden Expandable Text

False_Epiphany

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!

cgregory

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.

.list1 {

display: none;

list-style-type: none;

margin: 0;

padding: 0;

}

.show1 {display: none; }

.hide1:focus + .show1 {display: inline; }

.hide1:focus { display: none; }

.hide1:focus ~ .list1 { display:inline; }

@media print { .hide1, .show1 { display: none; } }

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

False_Epiphany

That did exactly what I wanted. Thank you so much!

alex_redeye

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.

DerkG

Same

cgregory

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.