Creating a 'course map' from divs using javascript and CSS

Creating a 'course map' from divs using javascript and CSS

by Adam Pryor -
Number of replies: 0

Hi all,

I'm currently working on something for some courses I was creating and I'm running into a couple of snags - was wondering if anyone on here would be able to lend me an opinion on how to make this work a bit better?

I'm trying to create a 'course map' for some online CPD courses I'm creating, which basically consists of a brief overview of the course (a row of boxes in a bootstrap grid) which users can click on to open up another expanded box underneath which gives them the option to go to the course (if the section is available). I've currently made a primitive version of this, whereby users can click on a "more info" button which unhides a div with that section's information (whilst hiding any other divs that might be open). I now want to take it to the next step by introducing some custom CSS classes to add some animation to these boxes (a quick slide down/up effect), but I'm running into some problems doing this because moodle automatically strips away any <style> tags I try to put into the page. I'm having to do it this way because I'm not a moodle admin and don't have access to the CSS files for our theme, so I'm hoping someone here might be able to tell me why the custom CSS isn't working and potentially suggest a workaround. I'm currently using the atto editor with moodle 3, but it seems that no matter which editor I use the CSS always gets scrubbed.

Sorry if this is in the wrong section - please let me know if it is and I can try somewhere else. I just thought because the tags and contents were getting scrubbed inside the editor that this might be the place for it.

Many thanks,

Adam

Average of ratings: -