Adapt Learning Community: Accordion Help

Hi all,

I'm new to Adapt and am in the process of building a template to use on our courses. I've encountered a couple of issues which I wondered if the community could help it with.

The idea for the design was to have collapsible articles to keep the page looking minimal. I played around with this for a couple of hours but wasn't able to do it. A workaround I came up with was to place the text and graphic components into an accordion and to have interactions, videos, etc. in between but this isn't an ideal solution. I was wondering if anybody had been successful in creating collapsible articles and if so how did you achieve it?

Secondly, there is a lot of white space at the bottom of the page that I can't seem to get rid of. Could somebody please guide me on how to remove it?

The course in it's current state can be found here:

https://cloud.scorm.com/sc/InvitationConfirmEmail?publicInvitationId=c7eb2569-c0f4-40a4-a51c-aed575b2ab85

I've sort of got my head around editing the LESS files and the custom CSS but am by no means an expert so any advice would be greatly appreciated :).

Thanks for your time,

Dan

Hi Dan

I can help you with the first thing - what you're trying to do sounds very much like it's what the article reveal plugin was designed to do. Though I have to warn you it's not always the easiest plugin to work with and we often have to customise it a fair bit for each project - though that is mostly down to each e-learning designer having a slightly different interpretation of how they think it should work ;-)

Equally you can use the trickle extension to reveal the page bit-by-bit which can keep it looking fairly neat...

Sorry I can't really help you with the second thing - I've had a quick look but I'm just as mystified as you are. I'm also not an expert (or even an intermediate!) when it comes to CSS/LESS though!

Show parent | Reply

Hi Matt,

Thanks for the swift response, greatly appreciated!

I briefly tried the article reveal plugin and trickle extension when I first started working on the template but couldn't get them to do what I was after, I'll give them both now that I'm a bit more familiar and with a bit more patience. Thanks :)

Show parent | Reply

Unfortunately there are no accordion like article extensions that I know of just a Blockslider that can show multiple item moving horizontally as you move down through the page.

Also just a thought but why don't you us a menu to make the page more minimal. Each Menu item can lead into the next using the quicknav extension. It would achieve same less is more feel by breaking up the layout into pages to move through.

The space at the bottom of the page can be fixed in the #wrapper by overflow being hidden...

#wrapper {

overflow: hidden;

Show parent | Reply

Hi Mike,

I hadn't looked at the blockslider, thanks for the heads up, I'll have a play.

We initially said we wanted to stay away from menus so that all the content was on one scrollable page. I like your idea though and will knock up a template to show the CS' how it could look and if I can't figure out a way to do the initial idea, this could be the route. Appreciate it :)

Also, thanks for the #wrapper tip, I've been stuck on that one for a while!

Show parent | Reply

Hi Mike (or anyone else in the community),

I wonder if you could help me with another issue I'm having? I've implemented the block slider you suggested and that has got me the effect I was after but I'm trying to move the navigation buttons to the bottom of the screen on each page. I've managed to get it down there but when I expand the accordion it overlaps the content. Do you know of a way to make the buttons relative to the accordion rather than the screen. I've included screenshots for reference and here is the code I currently have:

.blockslider-article .blockslider-control-right {

position: relative;

top:200px;

left: 48%;

}

Show parent | Reply

Hi Dan,

I am thinking your position: relative is incorrect and I say that because left and right functions naturally work better with position: absolute; My suggestion would be to change it to that below and see how that works for you. You can override it in project settings in the CSS/LESS area to test it out...

.blockslider-article .blockslider-control-right {

position:absolute;

top:200px;

left: 48%;

}

Show parent | Reply