Pseudo classes and elements on CSS (FAQ accordion)
Hello!
Has anybody had a chance to do a workaround with CSS an replicate an event listener on JS in an accordion-type animation? offline, it works like a charm on CSS by using pseudo-class and elements.
We added a nice SVG triangle with a rotate animation, hid the “answer” content and then make it collapsible.
But… when I added the CSS on the branding box, the look is working, but not the behaviour or the SVG:
Has anybody worked something similar before? It seems that CSS and HTML don’t talk if the HTML is losing the CSS file reference once the code is added in Docebo (copy-paste).
Input will be greatly appreciated! Txs!
Page 1 / 1
Here are a couple items where I might begin…
A shot in the dark here…
I offer this only because I read the terms “copy-paste”
**The copy-paste action can leave you stranded if the pasted quotes are rendered as “smart quotes” because they can break your code.
I have been burned by this many times in the past and now I am always sensitive to it. I only code with an editor now and default to a monospace font with straight quotes so that I avoid that issue.
** Another thought is to go back and verify that none of your code got stripped out by comparing side by side the original code and the pasted code after a save and exit.
Sometimes Docebo will strip out parts it don’t like.
@gstager Thanks for the input and ideas!
The copy-paste inconsistency suggestion makes sense. I am coding with Visual Studio Code, and upon pasting both, the html/css files, found match on straight quotes on both sides. I can’t remember an instance of smart quotes on VSC or even Brackets.
The styling on CSS worked perfectly in Docebo. The breaking point is the functionality of the hidden radius/checkboxes to display the content of the accordion. One thing which stood is that I am making a call to use an SVG file:
I am either between an incompatibility on the SVG call or pseudo classes/elements are not well received by Docebo. =(
A short time ago - I was playing around with the accordion idea. I ended up making something based on the active element which meant you had to click and hold. Yours has a nicer look and function compared to my generic sample..
Nonetheless, perhaps there is something there that might give you an idea.
I may need to revisit this idea and see what else I can come up with...
Just curious, this is for building your own complete accordion in a custom widget right? Not trying to modify where some existing accordions exist?
If the first, can you provide sample code for what you are trying? If works offline but not online, usually either something is being blocked (the svg not loading lends to this too) or class/id conflicts could be going on and then not specific enough, make sure to use special names for these kinds of customization to avoid common conflicts.
If the second, I tried to override some of the built in accordions a while back but ran into a problem because several of the elements don’t exist in the dom until they were selected, so without being able to use javascript, it was not possible to finish out.
@archoll72 - have you considered trying this without using the SVG?
What you have is probably better than what I have discovered but this seems to do the trick.
