Collapsable DIVs

Toejam08
Toejam08
edited July 2017 in Campaign Portal Building

I have been racking my brain to get this to work. I basically want collapsible divs for certain information that can be toggled open and close, but I can't get any method to work on this site. I have tried a method using an input tag with a checkbox, two "a" tags that alternate the box that wouldn't work on chrome, and the details tag. The input and details tags weren't accepted by the site. I have no idea why. I would love some solution to this.  

Post edited by Toejam08 on

Comments

  • cgregory
    cgregory
    Posts: 780 edited July 2017

    The only way i've gotten collapsible divs to work on all browsers to work is to use animation.

    Hover on the show after chrome show for an example of it. Then hover on the displayed text to hide it.

    https://dead-men-tell-no-tales.obsidianportal.com/wikis/testpopup

     



     <a class="chromeshow" tabindex="0">Show</a>

    <div class="GearText">

    ....Running Black Market Alpha(tm)

    ....Connecting to subscribed Black Market Contacts(tm)

    ....Identity Spoofed

    ....Encryption Keys Generated</div>

     

    With your css being

    .GearText:hover {

    animation: gearfade 1s 1 ease-in forwards;

    animation-iteration-count: 1;

    }

    .GearText {

      opacity: 0;

      font-size: 0px;

      animation: gearshow 1s 1 ease-in forwards;

      animation-play-state: paused;

      animation-iteration-count: 1;

    }

    .chromeshow:hover ~ .GearText{

     animation-play-state: running;

    }

    @keyframes gearshow {

      0%   { opacity: 0;  font-size: 0px;}

      100% { opacity: 1; font-size: 14px;}

    }

    @keyframes gearfade {

      0%   { opacity: 1;  font-size: 14px;}

      100% { opacity: 0; font-size: 0px;}

    }

     

    Post edited by cgregory on

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Toejam08
    Toejam08
    Posts: 11

    I'll give that a try and see if it works for what I'm trying. Thanks! Appreciate it!

  • Jim_Mount
    Jim_Mount
    Posts: 162 edited August 2017

    Hey I think I got this one!

    If what you are looking for is on my Main Wiki page:

    https://age-of-serpents.obsidianportal.com/wikis/main-page#episodes

    Put this in your CSS


    /*DROP DOWN MENU */
    .MapMenu {
    background-color: transparent;
    position:relative;
    padding:5px;
    border-radius:3px;
    text-align:justify;
    display:inline-block;
    top:3px;
    vertical-align:top;
    overflow:hidden;
    max-height:48px;
    line-height:1.5;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    }

    .MapMenu:hover {
    max-height:10000px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    }

    Then enclose the content on the individual page with this:

     

    <div class="MapMenu">
    <b>MOUSE OVER ME TITLE</b><p>
    <p>YOUR DROP-DOWN CONTENT</p>
    </div>

    Hope it helped!

    Post edited by Jim_Mount on

    ~ JIM,

    image

    Campaign of the Month, September 2016

  • Jim_Mount
    Jim_Mount
    Posts: 162 edited August 2017

    You might have to play around with the font and border sizes to make it look right.

    I know I got that from someone else, Ketharian I think. In any case, c-greg's might look better for you but both work.
    Post edited by Jim_Mount on

    ~ JIM,

    image

    Campaign of the Month, September 2016

  • weasel0
    weasel0
    Posts: 435

    And one more bookmark.

    ~Weasel0

    A Parade of Black | ShadowRunHack |

    Where I play with CSS code

  • cgregory
    cgregory
    Posts: 780

    Nice Jim.  Transition animations plus max-height works nicely.

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Toejam08
    Toejam08
    Posts: 11

    These are great ideas and I appreciate the help; however I really want something that would work the same but not using hovering. 

  • Toejam08
    Toejam08
    Posts: 11

    Basically, I want to make something they click on and it opens that section, and if they click on it again it closes it. That way they can choose which sections to have open at once so it is easier to jump back and forth between the content they want to look at. 

  • Anubus
    Posts: 4

    Seconded Toejam08, I've been hunting for exactly what I think you are looking for.  Any success?

  • Bortas
    Bortas
    Posts: 645

    I'm almost positive this is not possible without javascript.

    -bort

    Morwindl - Rising Tide

    Campaign of the Year - 2018

  • Toejam08
    Toejam08
    Posts: 11

    Yeah I have not really had success with this at all. Without javascript or the ability to use the HTML5 details and summary tags, I don't know how to do what I want. Any reason that they don't allow the details and summary tags?

  • fakkunamae
    Posts: 1

    Is there a way to integrate this sort of thing into the base character sheets for pathfinder and 5e?

    I'd really like to figure this out as it seems like it would be very simple to add, It seems to work just fine in the OGL roll20 sheet, but I'd like a sheet that doesn't need that kind of thing to run.

    I can inspect the element but where I need to go to find the properties listed or if I can just try and plug the attributes in as is is uncertain

Sign In or Register to comment.

April 2024
Season of Strife

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions

Categories