ejbenke / spfx-react-accordion-section Goto Github PK

This is a great piece of code. I am a newbie in that language. I am trying to get the First item to be selected/preExpanded at loading. Not really getting anywhere with below

preExpanded: string[] [optional, default: []]
Accepts an array of strings and any AccordionItem whose uuid prop matches any one of these strings will be expanded on mount.

nor how to implement that piece of code I found while searching for an answer.

   <Accordion preExpanded={[placeholders[0].uuid]}>
        {placeholders.map((placeholder: Placeholder) => (
            <AccordionItem
                key={placeholder.heading}
                uuid={placeholder.uuid}
            >
                <AccordionItemHeading>
                    <AccordionItemButton>
                        {placeholder.heading}
                    </AccordionItemButton>
                </AccordionItemHeading>
                <AccordionItemPanel>{placeholder.panel}</AccordionItemPanel>
            </AccordionItem>
        ))}
    </Accordion>

I also found the AccordionItem class with the instanceUuid property

export default class AccordionItem extends React.Component {
static defaultProps: typeof defaultProps;
static displayName: DisplayName.AccordionItem;
instanceUuid: UUID;
renderChildren: (itemContext: ItemContext) => JSX.Element;
render(): JSX.Element;
}

As items/results is a zero based collection, would have thought that items(0).selected=true or items(0).preExpanded=True.

Could anyone point me into the right direction or provides the line of code? it is going to be so simple that I feel embarrassed to ask. Thanking you in advance

Hey ejbenke,

I was having an issue getting this to work in our environment using IE11. I discovered that adding a few "references" fixes it. I added the following imports which seems to have resolved it:

import "core-js/es6/array";
import "es6-map/implement";
import "core-js/modules/es6.array.find";

Cheers!

@ejbenke this is a great sample. I've been looking for a good accordion SPFx sample.

Would you be interested in posting your sample on the aka.ms/spfx-webparts samples repository?

If you're interested, you can let me know via GitHub or @bernierh on Twitter and we can make it happen!

Thanks for sharing your awesome work!

Hi
What is the best way be can change the arrow from top and down to + and _

Hi,

Apologies for using this as a contact channel (l hope it doesn't contravene community guidelines).

We would really like to use this web part. My first question is is it compatible with 365 SPO 2019. Secondly, unfortunately we have no developer expertise (we are a small UK College) and do not know how to install and deploy GitHub based web parts. Is there a "complete" version we can install ?

Again sorry for contacting you this way but any help would be deeply appreciated as this would be an excellent solution for us. I can provide contact details if helpful..

Thanks

Alan

Hello,

Thank you for creating this code. It helps a lot with newbies like me just learning how to code. My questions is how to make the Accordion SharePoint Webpart Title be collapsible/expandable (I believe this might be called a Nested Accordion), so that all the sections under the Title are collapsed when the user lands on the SharePoint page?

Any guidance would be greatly appreciate.

Hi @ejbenke - Hope you are doing well. Thank you for your help on the Collapsible/Expandable Webpart Title last year which is working great.

I'm looking at having the accordion Webpart to be able to have a second subtitle to be entered to create multiple collapsible sections in the accordion. So it will have three levels where the first level is the Title, the second level to be another Title (subtitle), and the third level will pull the content from the SP list. Pictured below.

I tried several days to figure out the code but wasn't successfully.

Any help with this would be great.

Thank you for all your help and looking forward to hearing from you.

First off- thanks for makig this available!

What should the field type for 'Content' Be. I have tried Text field ('Rich text' and also 'Enhanced rich text'

When using 'Rich text' line breaks are not rendered for the client.
When using 'Enhanced rich text', the html is not rendered but displayed as part of the content.

I am using the code as provided and made no changes. Any guidance will be appreciated.