{"id":4387,"date":"2016-08-19T08:50:00","date_gmt":"2016-08-19T11:50:00","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=4387"},"modified":"2019-03-16T02:24:49","modified_gmt":"2019-03-16T05:24:49","slug":"criando-accordion-com-css3","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/criando-accordion-com-css3\/","title":{"rendered":"Criando Accordion com CSS3"},"content":{"rendered":"<p>Quando se pensa em criar efeitos de intera\u00e7\u00e3o, pensamos em\u00a0recorrer ao javascript. Na tr\u00edade, HTML (marca\u00e7\u00e3o), CSS (estilo) e Javascript (Comportamento), \u00e9 natural pensarmos no Javascript.<\/p>\n<p>Mas \u00e9 poss\u00edvel ter esses mesmos efeitos utilizando apenas o CSS3.<\/p>\n<p>Nesse tutorial, mostrarei como criar um efeito accordion (sanfona), utilizando apenas o HTML e CSS3.<\/p>\n<h3><img decoding=\"async\" class=\"aligncenter wp-image-4479 size-medium\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/08\/AccordionPost-1-600x338.jpg\" alt=\"Accordion com CSS3\" width=\"600\" height=\"338\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/08\/AccordionPost-1.jpg 600w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/08\/AccordionPost-1-24x14.jpg 24w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/>Vamos come\u00e7ar<\/h3>\n<p>Criaremos o arquivo index.html\u00a0e definir a nossa estrutura.<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;!doctype html&gt;\r\n&lt;html lang=\"pt-br\"&gt;\r\n&lt;head&gt;\r\n\t&lt;meta charset=\"UTF-8\"&gt;\r\n\t&lt;title&gt;Accordion com CSS3&lt;\/title&gt;\r\n\t&lt;link rel=\"stylesheet\" href=\"css\/style.css\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\t\r\n\t&lt;div class=\"accordions\"&gt; \r\n          &lt;div class=\"accordion-item\"&gt;\r\n              &lt;input type=\"radio\" name=\"accordion\" checked=\"checked\" id=\"accordion-1\" \/&gt;\r\n              &lt;label for= \"accordion-1\"&gt;Empresa&lt;\/label&gt;\r\n              &lt;div class=\"accordion-content\"&gt;Minha Empresa&lt;\/div&gt;\r\n          &lt;\/div&gt; \r\n          &lt;div class=\"accordion-item\"&gt;\r\n              &lt;input type=\"radio\" name=\"accordion\" id=\"accordion-2\" \/&gt;\r\n              &lt;label for= \"accordion-2\"&gt;Servi\u00e7os&lt;\/label&gt;\r\n              &lt;div class=\"accordion-content\"&gt;Meus Servi\u00e7os&lt;\/div&gt;\r\n          &lt;\/div&gt; \r\n          &lt;div class=\"accordion-item\"&gt;\r\n              &lt;input type=\"radio\" name=\"accordion\" id=\"accordion-3\" \/&gt;\r\n              &lt;label for= \"accordion-3\"&gt;Contatos&lt;\/label&gt;\r\n              &lt;div class=\"accordion-content\"&gt;Meus Contatos&lt;\/div&gt;\r\n          &lt;\/div&gt;\r\n      &lt;\/div&gt;\t\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>Explicando o c\u00f3digo acima:<\/p>\n<ul class=\"list-tutorial\">\n<li>Na linha 6, chamamos o arquivo style.css que ir\u00e1 conter o estilo da nossa p\u00e1gina, inclu\u00eddo a configura\u00e7\u00e3o do efeito;<\/li>\n<li>Na linha 9 \u00e9 um wrapper que ir\u00e1 conter todos itens do accordion;<\/li>\n<li>Na linha 10, 15, 20 s\u00e3o os elementos que ir\u00e3o agrupar\u00a0cada item da aba;<\/li>\n<li>Na linha 11, 16, 21, s\u00e3o elementos de input do tipo radio;<\/li>\n<li>Na linha 12, 17, 22 s\u00e3o elementos de label, que s\u00e3o associados aos input, pelo atributo for;<\/li>\n<li>Na linha 13, 18, 23, s\u00e3o elementos que ir\u00e3o conter o conte\u00fado a ser exibido.<\/li>\n<\/ul>\n<p>A l\u00f3gica aplicada para cria\u00e7\u00e3o do efeito \u00e9 verificar o elemento do input do tipo r\u00e1dio que est\u00e1 marcado e mostrar o conte\u00fado que est\u00e1 precedido dele.<\/p>\n<p>Veremos\u00a0dois tipos de seletores:<\/p>\n<p><em>[atributo ^=valor]<\/em> =&gt; Esse seletor informa que deseja selecionar qualquer atributo que comece com determinado valor.<\/p>\n<p><em>Elemento1 \u00a0~ \u00a0Elemento2<\/em> =&gt; Esse seletor informa que quero selecionar qualquer <em>Elemento2<\/em> que esteja precedido do <em>Elemento1<\/em>.<\/p>\n<p>Agora vamos criar o arquivo <em>style.css<b>:<\/b><\/em><\/p>\n<pre class=\"lang:css decode:true \">.accordions{\r\n    width:600px;\r\n    margin:0 auto;\r\n    border:1px solid #ccc;\r\n}\r\n.accordion-item input{\r\n\tdisplay:none;\r\n}\r\n.accordion-item label{\r\n    display:block;\r\n    border:1px solid #ccc;\r\n    background:#e5e5e5;\r\n    cursor:pointer;\r\n\tpadding:5px 3px;\r\n}\r\n.accordion-content{\r\n    height: 0px;\r\n    overflow: hidden;\r\n    -webkit-transition: height 0.3s ease-in-out;\r\n    -moz-transition: height 0.3s ease-in-out;\r\n    -o-transition: height 0.3s ease-in-out;\r\n    -ms-transition: height 0.3s ease-in-out;\r\n    transition: height 0.3s ease-in-out;\r\n }\r\n[id^=accordion]:checked ~ .accordion-content {\r\n    height: 100px;\r\n}<\/pre>\n<p>Explicando o c\u00f3digo acima:<\/p>\n<ul class=\"list-tutorial\">\n<li>Na linha 1 a 5, configuramos o container dos elementos do accordion;\n<ul>\n<li>Definimos uma largura;<\/li>\n<li>Centralizamos na horizontal;<\/li>\n<li>Adicionamos uma borda;<\/li>\n<\/ul>\n<\/li>\n<li>Na linha 6 a 8,\u00a0ocultamos o elemento input;<\/li>\n<li>Na linha 9 a 15, configuramos o label que ser\u00e1 &#8220;clic\u00e1vel&#8221;;\n<ul>\n<li>Renderizamos o elemento em bloco;<\/li>\n<li>Adicionamos uma borda;<\/li>\n<li>Definimos uma cor de fundo;<\/li>\n<li>Definimos o\u00a0ponteiro do cursor como\u00a0algo &#8220;clic\u00e1vel&#8221;;<\/li>\n<li>Adicionamos um padding para um espa\u00e7amento interno.<\/li>\n<\/ul>\n<\/li>\n<li>Na linha 16 a 24, configuramos\u00a0o elemento que engloba o conte\u00fado;\n<ul>\n<li>Definimos a altura como &#8220;0&#8221; para ser aplicado o efeito;<\/li>\n<li>O overflow:hidden n\u00e3o mostra o \u00faltimo item;<\/li>\n<li>O transition define o tipo de efeito que queremos:\n<ul>\n<li>height: define\u00a0a propriedade que ter\u00e1 a transi\u00e7\u00e3o;<\/li>\n<li>0.3s =&gt; define\u00a0o tempo desta transi\u00e7\u00e3o;<\/li>\n<li>ease-in-out =&gt; define como ser\u00e1\u00a0o comportamento desta transi\u00e7\u00e3o.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>Na linha 25 a 27, \u00a0selecionamos o elemento que est\u00e1 precedente e que seja\u00a0do tipo atributo checked, sendo\u00a0que o ID inicia\u00a0o accordion. E assim definimos uma altura, mostrando o conte\u00fado.<\/li>\n<\/ul>\n<p>Voc\u00ea pode conferir o efeito final acessando o link abaixo:<\/p>\n<p><a href=\"https:\/\/www.mxcursos.com\/blog\/exemplos\/accordion-css3\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.mxcursos.com\/blog\/exemplos\/accordion-css3<\/a><\/p>\n<p>Baixe os arquivos usados neste tutorial.<\/p>\n<p><a href=\"https:\/\/github.com\/davidchc\/tutorial-efeito-accordion-css3\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/davidchc\/tutorial-efeito-accordion-css3<\/a><\/p>\n<p>Gostou do artigo? Compartilhe com seus amigos.<\/p>\n<p>Um abra\u00e7o e at\u00e9 a pr\u00f3xima.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quando se pensa em criar efeitos de intera\u00e7\u00e3o, pensamos em\u00a0recorrer ao javascript. Na tr\u00edade, HTML (marca\u00e7\u00e3o), CSS (estilo) e Javascript (Comportamento), \u00e9 natural pensarmos no Javascript. Mas \u00e9 poss\u00edvel ter esses mesmos efeitos utilizando apenas o CSS3. Nesse tutorial, mostrarei como criar um efeito accordion (sanfona), utilizando apenas o HTML e CSS3. Vamos come\u00e7ar Criaremos [&hellip;]<\/p>\n","protected":false},"author":67,"featured_media":4481,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[678],"tags":[],"class_list":["post-4387","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/4387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=4387"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/4387\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/4481"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=4387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=4387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=4387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}