Home › Discussions › Campaign Portal Building › Collapsible Divs - Campaign Portal Building Discussions on Obsidian Portal Community Forums
Collapsible Divs
Hey guys, I am the GM of Bad Blood :: War of the Covens, and I wanted to add something in to my Char Sheets that could collapse all of the different fields to make searching them easier, without having to scroll half of forever, especially on my magic-wielding or psychic characters. I do design outside of OP, and so most of the problems I have are not being able to translate everything I know how to do outside into what I can do in OP. The CSS/HTML That I use are:
In-Line HTML script:
TITLE
(Items/Information)
CSS Script:
.filter-type {
border-bottom: 1px dotted #666;
}
.sidebarlistscroll {
width: 220px;
height: 200px;
margin-bottom: 15px;
overflow-y: scroll;
border: none;
visibility: hidden;
}
#filter{display:none}
#filter:checked + .sidebarlistscroll{
visibility: visible;
}
I put the CSS into the main page CSS, and then put in the HTML, but it did not work, it came up with displaying the HTML on the page. Does anyone have any suggestions?
In-Line HTML script:
TITLE
(Items/Information)
CSS Script:
.filter-type {
border-bottom: 1px dotted #666;
}
.sidebarlistscroll {
width: 220px;
height: 200px;
margin-bottom: 15px;
overflow-y: scroll;
border: none;
visibility: hidden;
}
#filter{display:none}
#filter:checked + .sidebarlistscroll{
visibility: visible;
}
I put the CSS into the main page CSS, and then put in the HTML, but it did not work, it came up with displaying the HTML on the page. Does anyone have any suggestions?
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
I eventually settled for hover tabs, not ideal, but they work. Look at my wiki, if this would work for you I can help you out.
http://www.obsidianportal.com/campaigns/our-legacy-of-fire
You can see an example of it "here,":http://www.obsidianportal.com/campaign/high-fantasy/wikis/geography in my high fantasy campaign (still being built). Look below the map for the example.
twigs
"I met a traveller from an antique land....."
CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.
Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign
Inner Council Member
Hopefully the linked page shows the original poster an example of expanding / collapsible divs. That was the real objective.
If you want, I am more than happy to share the HTML code (the CSS is already posted, under the Mechanics section) so you can see what correlates to what.
I may take you up on your offer later.
I have decided not to do any more layout stuff on my site till after the Reforge kicks in though.
twigs
"I met a traveller from an antique land....."
CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.
Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign
Inner Council Member
Unconquered Kingdoms, July 2016 CotM
Also, thank you for making all the CSS and stuff available, you did some really cool stuff with your campaign.
Shadowrun: The Rat's Nest - COTM November 2014
I have added the HTML to a sample page for the collapsible menus. It can be found through the Mechanics section, but here is a "direct link.":http://www.obsidianportal.com/campaign/high-fantasy/wikis/sample-collapsible-menus
Please note that despite the use of @ symbols, the double bracket Textile link gets turned into a full href reference (but at least it's not an actual link). For your entry links, use whatever works best for you.
As for including the CSS and sample HTML, you are quite welcome. I found it rather helpful when other sites had that when I was reviewing them for implementation ideas, so I felt that having such sections on my site was rather imperative. I have always preferred collaboration over competition, and feel good when I can be of help to others.