remove Accordion arrow

hey, is it possible to remove the accordion arrow?

basically to make it look like this instead

still works as accordion but with no arrow

vaadin-accordion-panel::part(toggle) { display:none; }

or, in components/vaadin-accordion-panel.css:
[part="toggle"] { display: none; }

Would I need to overwrite the css? And how?

you’ll need to provide custom css that overrides the defaults yes.

Here are the docs about theme folders, where your css is supposed to go

of those two options I gave, the first one goes to styles.css

And of course you’ll need to make sure you’re actually applying that theme folder (if you’re not doing that already):

yes. i made a components/vaadin-accordion-panel.css file with the css but nothing changes?

did you put the [part="toggle"] { display: none; } version in there, or the other one? Because the other one should go into styles.css

So I put vaadin-accordion-panel::part(toggle) { display:none; } inside of styles.css?


doesnt seem to change anything

Hi! Silly question, but (if you use productipon mode) did you make a full build or just a server rerun/redploy?

make another post

Have you applied your custom theme with the @Theme annotation?

@Theme(value = "my-theme") //Name of your theme folder
public class Application extends SpringBootServletInitializer implements AppShellConfigurator { 
  public static void main(String[] args) {, args);

yeah that css will work in styles.css provided that the theme folder it’s in is loaded

yep i added it and it still changed nothing

@Theme(value = "my-todo")```

@import url('line-awesome/dist/line-awesome/css/line-awesome.min.css');
vaadin-accordion-panel::part(toggle) {