Crie accordion sem javascript

 

<details> é uma tag que podemos encapsular de desencapsular um determinado conteúdo, para obter informações adicionais sobre uma determinada informação, resumindo um accordion. Para trabalhar com esse recurso além da elemento <details>, precisamos do elemento <summary>, ele deve ser incluso como filho do <details>. Com este elemento conseguimos prover uma legenda ou um capítulo para o conteúdo restante, ele também será responsável por clicarmos nele e o conteúdo ser exibido.

O elemento <details> tem um atributo chamado open, ele define se o conteúdo será inicialmente visível ou não. Por default essa propriedade é false. Com esse recurso produz uma interatividade sem nenhum javascript.

Vamos ao código:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Details </title>
	<style>
		details{
			border-radius:3px;
			padding:5px;

		}
		summary{
			border-radius:3px;
			border:1px solid #ddd;
			padding:5px;
			outline:none; 
		}

		details[open]{
			background:#ddd;
			border:1px solid #333;
		}
		details[open] summary{
			border:none;
		}
	</style>
</head>
<body>

<details open>
	<summary>Autor</summary>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, nemo, dolores numquam fugit ipsum velit eaque repudiandae ea libero est.</p>
</details>

<details>
	<summary>Livros</summary>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, nemo, dolores numquam fugit ipsum velit eaque repudiandae ea libero est.</p>
</details>

<details>
	<summary>Jobs</summary>
	<p> Consequuntur, consequatur ut earum dolore placeat doloribus in voluptatem culpa.</p>
</details>
</body>
</html>

No código acima adicionei um CSS para dar um acabamento visual, nele vou fazer duas observações, o summary por default quando clicado exibe um highlight para remove-lo basta adicionar a propriedade “outline:none; “. A segunda observação é referente a como estilizar um item quando ele está ativo, para isso utilizamos o seguinte seletor “details[open]”. No código HTML o primeiro item tem a propriedade open setada assim ele inicia com seu conteúdo exibido. e o resultado será o seguinte:

 

Um recurso simples que economiza o uso de Javascript. O código desse tutorial você pode encontrar no meu gitHub no seguinte link: https://github.com/fellyph/Tutorial-bbUI/tree/master/details

Deixe uma resposta

This site uses Akismet to reduce spam. Learn how your comment data is processed.