Collapsable Sections/Showing Hidden Divs

berdman
berdman
edited May 2013 in General Archive
What I would really like is the ability to have collapsable sections in the wiki pages or have a hidden div show when the user mouses over or clicks on something.

This would help in managing longer wiki pages.

Comments

  • crimsonknave
    crimsonknave
    Posts: 28
    I'd love to have sections be collapsible. Something like the tag in adventure log posts would be great!


    Side note: you can do some of this currently.

    I'm not sure you can do the click toggle display without javascript, but you can do the hover with just css (and thus in the current system). For example, hover over the text that says "This is outside" on this page: http://www.obsidianportal.com/campaign/crimsonknave-s-test-campaign/wikis/main-page

    This does require some html inserted into your wiki pages, but can be achieved with just two divs and custom css.
  • Langy
    Langy
    Posts: 364
    Yeah, but the lack of clickability can be a problem - namely due to mobile devices lacking 'hover' features.
  • gaaran
    gaaran
    Posts: 740
    Yeah, if you check out "this":http://www.obsidianportal.com/campaign/the-dark-queen-of-the-west/wikis/main-page page on our wiki, and you can see the hover effect being used. (And if anyone can suggest how to make the right most buttons stop the on hover from moving all the buttons like 5px to the left, i would appreciate it :P).

    They're right though, this doesn't play well with mobile.
  • berdman
    berdman
    Posts: 46
    Had not figured out how to do that, that works pretty well.

    I really want the collapsable sections, the hidden div would be nice, but like Langy points hover is probably something to stay away from going forward. If they go with a design to make the site look/work better on mobile then hover would not be good.

    Thanks for sharing the hover trick.
  • JustinMason
    JustinMason
    Posts: 36 edited May 2013
    I was pondering this feature myself, and while it maybe "reinventing the wheel" I figured the start of the reforging process would be a good point to bring up the solution that came to my mind. I think it could be interesting to have a new "data type" called "notes". And, it could work pretty much the same way that "insert character/link" options currently work, but instead use this "collapsible div" method when displayed on the page. Essentially a note would be a snippet of information that can be included into any content by reference to the note itself. Being able to include "notes" which can be expanded within content on multiple pages would come in handy as well for expanding on topics inline with content rather than having to exclusively utilize hyperlinks to another page.

    I believe this would also allow for the same effect the above posts are talking about. Just make a note of the desired "collapsible content" and add "include" it into the page content.

    Edit: Also, expanding on the concept. A note would have "title" and "content". When included into a page, by default it could show the click able "title and/or 'linked' text" with a tiny "note" icon next to it, which when clicked opens an expanded div containing the note content, which of course can then be "minimized" back into the icon once read. I could see using this feature to make definitions of words, etc. accessible within the content itself.
    Post edited by JustinMason on
  • Matrissa_The_Enchant
    Matrissa_The_Enchant
    Posts: 18 edited May 2013
    Regarding @Hoptowngamenight's comment about inserting "notes" - one of the wiki's I've used in the past (and I can't remember which one right now, I'll try to find out) lets you insert content from one page inside another page. It also let's you "mark" a section of one page and then, when you "include" that page elsewhere you can specify that only the "marked" section is imported. It's really useful as a way of providing a short "summary" of one or two paragraphs on a page and then using it on a "Contents" page by providing a link to the page and then including the "summary" for the page immediately below the link.

    Oh, and I totally agree that either being able to define regions of a page as collapsable, or just automatically making each header the top of a collapsible region, would be nice for long pages.

    EDIT: It was Atlassian Confluence that I was using. They offer a "30 day free trial":http://www.atlassian.com/software/confluence/try/ if you want to check it out.
    Post edited by Matrissa_The_Enchant on
  • crimsonknave
    crimsonknave
    Posts: 28
    Wikispaces allows you to embed the contents of a wiki page into another as well as generate a Table of Contents and so on. I've created an example wiki that anyone can edit and play with "here":http://crimsonknave.wikispaces.com/home . It doesn't appear to be able to insert specific sections of a page, but you could always just have the sections be individual pages that are included in multiple places.
  • Matrissa_The_Enchant
    Matrissa_The_Enchant
    Posts: 18
    On the topic of the different features of other wiki's, are you actually crafting your own wiki based application or integrating an existing wiki or other Content Management system into the backend? The former does give you more "control" but the latter could save you a lot of time, especially if it already had a lot of the features you want to add (like natural editing). If you went with something open sourced you can even customize it and add the features that it doesn't have.
  • Morgus
    Morgus
    Posts: 19
    On the topic of wiki application/backend: A way to see all red links in your wiki would be amazing.

    I would support collapsing page sections for longer wiki pages, as well.
  • ChainsawXIV
    ChainsawXIV
    Posts: 530 edited May 2013
    Run this code on page load:
    @var spoilers = document.getElementsByTagName('spoiler');
    for(var i = 0; i < spoilers.length; i++){
    var spoiler = spoilers[i];
    var label = document.createElement('a');
    label.innerHTML = spoiler.attributes.title.value;
    label.onclick = function(){
    var block = this.nextSibling;
    if(block.style.display == 'none')
    block.style.display='block';
    else
    block.style.display='none';
    };
    spoiler.parentNode.insertBefore(label,spoiler);
    spoiler.style.display = 'none';
    }@

    Put something like this in the page:

    @Stuff that will be [email protected]
    Post edited by ChainsawXIV on
  • Micah
    Micah
    Posts: 894
    Good ideas, people.

    Just so it's clear, we're a custom-built wiki on top of Ruby on Rails. In 99% of cases, if another wiki platform has it, we can do it, but it's not something we can just include for free. The downside is...well...we don't get things for free just by including some other system. The upside is that we can cater exactly to RPGs with features like GM-only sections and player secrets. Nobody else is going to have that and it's what sets us apart.

    Collapsible sections (like the more tag, or spoilers tags on various forums) are fairly easy. In other words, it could be done. Page and content includes are where things get trickier and trickier. Plus, as it gets more advanced, the number of users who would actually use it heads towards zero. I'm always wary of features that are both unpopular and complicated to build. Sometimes they're necessary, but I have to really think hard before going that road.

    I do like the idea of the Notes. It corresponds to the "notes in the margin" that we all take on our character sheets an other notebook pages as we're running the games. I'll have to think some more about how this would work, though.
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,956
    Awesome Micah! Thanks for all of your responses! The Notes would be a great feature, and I know my group would use it regularly!

    Just trying to help out.

Sign In or Register to comment.

June 2022
Baldur's Gate

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