JSON Accordion

Type: Partial

Code: html, postcss, javascript, gulp

Status: Finished

An example how to generate an accordion from a JSON file. I used GULP, PostCSS, BEM methodology and vanilla JavaScript for the project.


JSON Structure

{
	"blocks": [
		{
			"heading": "Section 1",
			"content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore sed aliquam vitae fugit odit voluptate eligendi, blanditiis quasi nobis reiciendis! Rem maiores reprehenderit animi aliquam inventore vel adipisci delectus itaque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore sed aliquam vitae fugit odit voluptate eligendi, blanditiis quasi nobis reiciendis!"
		},
		{
			"heading": "Section 2",
			"content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore sed aliquam vitae fugit odit voluptate eligendi, blanditiis quasi nobis reiciendis! Rem maiores reprehenderit animi aliquam inventore vel adipisci delectus itaque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore sed aliquam vitae fugit odit voluptate eligendi, blanditiis quasi nobis reiciendis! Rem maiores reprehenderit animi aliquam inventore vel adipisci delectus itaque!"
		},
		{
			"heading": "Section 3",
			"content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
		},
		{
			"heading": "Section 4",
			"items": [
				"Item 1",
				"Item 2",
				"Item 3"
			]
		}
	]
}

 


Blaz K.

I’m a Denmark-based web developer specializing in React, TypeScript, and Next.js, with a strong focus on MACH architecture-based systems. I also have good experience in PHP from my previous roles as a full-stack developer working with WordPress, PrestaShop and Magento 2.


Leave a Reply

Your email address will not be published. Required fields are marked *