Collapsible wiki areas

Katiekat
Katiekat

Is there a way to make an area collapsible? All ways I've found have been requiring javascript or the like and obsidian doesn't approve.

Comments

  • ketherian
    ketherian
    Posts: 202

    There's a way to show/hide text in CSS; Bortas talks about it over here:

    https://forums.obsidianportal.com/discussion/comment/33487/#Comment_33487

    Sorry, a version of it is in my CSS; but I can't find a page on my site that uses it. 

  • Katiekat
    Katiekat
    Posts: 14

    Unless i'm missing something, isn't this about hiding it completely? I just want to be able to press a button to make certain content appear instead of others.

  • cgregory
    cgregory
    Posts: 481

    Fairly easy to do.

    First lets assume this is your html

    <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>

    And this would be your CSS

    .show1 {display: none; }

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

    .hide1:focus { display: none; }

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

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

    You don't really need the line containing @media print if you aren't going to print the page.

    Here is a Link talking about it.

    If you just copy and paste the code from his page it will not work, you need to change any css that references IDs to reference classes instead, since obsidian portal doesn't let you use IDs.

     

    They are among us!

    image

    Current Campaign: XCom: Defiance - Campaign of the Month November 2016

                                           My Campaign CSS

     

     

     

  • Jim_Mount
    Jim_Mount
    Posts: 141

    Are you looking for something like this:

    Tlukkah's Testimony

    That lets you mouse over text or an image then stretches out hidden text.

  • scrapplus
    scrapplus
    Posts: 1

    @Jim_Mount 

    I have been looking for that for a while now, how do you do that? none of the other options I have found seem to work.

  • killervp
    killervp
    Posts: 2,576

    @Jim_Mount that is awesome!

    Just trying to help out.

  • alex_redeye
    alex_redeye
    Posts: 38

    That is a lot smoother than any alternative I have come up with for something like this, looks really good @Jim_Mount

    -Red

    Campaigns: Dragon Age: Requiem

Sign In or Register to comment.