Set accordion item to not display as expandable

[Shawn Denton]

Is there a way to turn off expansion behavior and ui for certain accordion items? I was trying to use an accordion in a sidebar dock for a main navigation control, but some items should just be a navlink and won't have any expanded items, but I can't seem to find a way to have an item display normally (i.e. no down arrow... correct dock closed ui etc ...) or include other static items in an accordion's items. I tried to lay it out mixing list items and accordions using accordions to hold only the expandable items but it was a bit of a mess with lots of accordions and really didn't work for any third level items anyway. Since you have a sample using an accordion in a sidebar I thought it would save some time over implementing a bootstrap collapsible menu from scratch, but the accordion doesn't seem to work well with the sidebar like the one in your dock example. I'm having trouble with icons in the collapsed state plus accordion item without any children still has a dropdown icon and even drops down one empty line 

[Alagumeena Kalaiselvan]

Hi Shawn, 

Greetings from Syncfusion support! 

Query #1:  Is there a way to turn off expansion behavior and ui for certain accordion items? 

Yes, you can customize the expansion behavior of the specified accordion item by using Expanded property. 

Query #2: Accordion in a sidebar dock 

We have checked your case by loading the Accordion in a sidebar dock and we could not noticed the reported issue at our end. Also, we have prepared a sample based on your requirement which can be downloaded from the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AccordionComponent1954321074 

Kindly try out with shared sample and get back to us, If you have any further queries 

Query #3: Accordion without children still has a dropdown icon 

It is not an issue and also this is the default behavior of Accordion component. 

Regards 

Alagumeena.K  

[Shawn Denton]

Hi thanks for getting back to me, the project sent demonstrates the two issues as-is. For the item 'Options' which has no children and does not expand it shows a caret and expands an empty line when clicked. (see diagram 1)

Also when collapsed I would like to be able to control which icons end up in the dock, but at the least I would want to not see nested items in the way they are shown currently (see diagram 2) If you know of a way to create this behavior I'd love to know of it. Not sure if these is css way to achieve this one, but didn't want to spend the time until I knew if I could work around the other issue.

Diagram 1

Diagram 2

[Alagumeena Kalaiselvan]

Hi Shawn, 

Thanks for your update! 

Query #1: We have considered your case “Accordion without children shows a caret and expands an empty line” as defect and logged the bug report for that which can be tracked from the below link. 

Feedback Link: https://www.syncfusion.com/feedback/13095/accordion-without-children-show-the-empty-content-along-with-header-icon  

Also, we will include the fix for our upcoming patch release which may held on Mid of April, 2020. 

Query #2:  Show the icon alone in sidebar when the sidebar is Dock state 

We have achieved your case by defining the Accordion inside the span element and modified the already shared sample for your reference. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AccordionComponent-1771849222  

Kindly try with shared sample and let us know whether the solution meets your requirement. 

Regards 

Alagumeena.K 

[Shawn Denton]

Thank you the sample helped me fix the docked display icons

[Vengatesh Maniraj]

Hi Shawn, 

Thanks for the update. 

Please get in touch with us if you need any further assistance. 

Regards, 

Vengatesh