Where can I change javascript code and CSS code in my webpart files?

Question

Hello,

I'm building an accordion webpart using this link: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part#build-the-accordion 

I've completed all the steps and the accordion that shows up with the code provided works great. However, I'm trying to change up the code to make a nested accordion using the code from this site: https://codepen.io/Elodieb/pen/OJyLxXm 

I don't understand which file or section I should put in the necessary Javascript code. I updated the HTML in the MyWebpartTemplate.ts file and I assume the CSS code goes in the Webpart.module.scss file which are both under src\webparts\

Please help I've been stuck on this for hours and it's my first time doing front-end coding. The code editor im using is VSC

Answer 1

Sure, I posted there but if anyone knows here, please reply! thank you

Answer 2

Dear roroms,

Good day!!

I understand your concern and to my search, JavaScript code should go into the TypeScript file (MyWebpartTemplate.ts), and the CSS code should go into the SCSS file (Webpart.module.scss) but to get more information as it's related to SharePoint Online customization, I would like to suggest you to post your concern in the Questions - Microsoft Q&A with SharePoint Development tag to get the detailed help from the experts.

We regret for redirecting you to a different community as the members in the category posted focus on the users with the Microsoft 365 and out-of-the-box SharePoint Online concerns and have limited knowledge on the customization of SharePoint Online using script, so to get the fast and better assistance, we have redirected you to the correct community.

Thanks for your patience and understanding. Have a good day!!

Best Regards,
Sophia