ANNOUNCE: SectionUI: transform the UI of sections on a page

[neilw]

Rberinger and I worked on this one. See it here: SectionUI

This template changes the UI of sections on a page; for now, the only available option is a "tabs" interface, similar to the Tab/Accordion template, though we will add additional styles if demand warrants. The difference in this template is that it works with the existing contents of the page, not requiring tab names or content to be passed to the template or pulled in from elsewhere. That means you can just create a page normally, then add this template and *voila*: it will look different. As a bonus, the sections can be edited directly inside the new UI (e.g., you can edit a tab section inside the tab.)

This idea for this originated from two places: first, a challenge from crb to make existing sections on a page hideable. After figuring this out, it occurred to me that the foundation had been built to manipulate section appearance arbitrarily. Second, I thought of a request from buzz_burrowes to make a single page present as tabs. Rberinger gamely signed on to the effort and we banged out this template.

So here we are. We hope that this is either useful unto itself, or perhaps the starting point for some other good stuff, or if nothing else an interesting bit of jQuery coding. Feedback, as always, is welcome.

[rumjs]

This is a great template - thank you. Very useful in organising large pages. I am keen to try out the accordion structure - I can do it using the other 'tab/accordion' template, but was wondering if the functionality will be added to this template. This is a much simpler and more intuitive template to use, and easier to insert into existing pages. Thanks.

[neilw]

We were planning to add accordion and other styles, depending on need and demand. There has been no response though, so we haven't been too motivated. I'll take a look and see what it would take to add the accordion, but I can't promise anything quickly. I also want to add a FAQ style.

What version of mindtouch are you using?

[rberinger]

We were planning to add accordion and other styles, depending on need and demand. There has been no response though, so we haven't been too motivated. I'll take a look and see what it would take to add the accordion, but I can't promise anything quickly. I also want to add a FAQ style.

What version of mindtouch are you using?

It was strange that there was not more comment about this template since we basically built it with certain peoples requests in mind. I forgot about the FAQ style that we shortly discussed. NeilW, I'll take a look also for the accordion and see if I can get the framework down maybe over the weekend (time permitting). Can you sorta draw-up your thoughts about the FAQ part and share with me? You should still have my email address.

[crb]

Thanks for noticing my absence, but I've been busy moving countries and starting new jobs (with no MindTouch installation at them)...

[neilw]

Thanks for noticing my absence, but I've been busy moving countries and starting new jobs (with no MindTouch installation at them)...

Hey, no problem, wasn't just you anyway. I just expected a bit more reaction to this, though it may be due to its somewhat arcane nature. I think I'm gonna put more detail in the page title, since that's all folks see in the App Catalog listing.

Good luck on a Mindtouch-less work life, and a successful 11,000 mile (or so) move.

[rumjs]

We were planning to add accordion and other styles, depending on need and demand. There has been no response though, so we haven't been too motivated. I'll take a look and see what it would take to add the accordion, but I can't promise anything quickly. I also want to add a FAQ style.

What version of mindtouch are you using?

Thanks neilw - I'm using mindtouch core 9.08.1

[buzz_burrowes]

Thanks guys... sorry for the delay in getting back to you. Sweet template!

- Buzz

[neilw]

We have updated SectionUI to now support accordions. Also it is a bit more well behaved with regard to FOUC.

Enjoy.

[larsb]

Doesnt work for me, when I debug the JS this is what throws it:

$('#'+top_id).accordion(options);             break;

Under:

// Call appropriate styler
    switch(style) {
        case 'tab':
            $('#'+top_id).tabs(options);             break;
        case 'accordion':
            options.header = 'div.accordion-header';
            $('#'+top_id).accordion(options);             break;
        default: break;
    }

Doesn't matter if I go with accord. or tabs..can't get it to work :/ The regular Tabs template is working however. Can't get it to work in any browser, this is what it looks like: