Accordion com Jquery

Postado: 20 de março de 2021

Neste artigo veja como fazer um simples accordion com jquery e css.

Vamos começar com html

<ul id="toggle-item">

     <li>
         <h3>Html5</h3>
         <span><i class="icon icon-plus-square"></i></span>
         <p>A expressão Lorem ipsum em design gráfico e editoração é um texto.</p>
     </li>
     <li>
         <h3>Css3</h3>
         <span><i class="icon icon-plus-square"></i></span>
         <p>A expressão Lorem ipsum em design gráfico e editoração é um texto.</p>
     </li>
     <li>
         <h3>Jquery</h3>
         <span><i class="icon icon-plus-square"></i></span>
         <p>A expressão Lorem ipsum em design gráfico e editoração é um texto.</p>
     </li>
                    
</ul>

Css para estilizar:

#toggle-item { 

  width:100%; 
  float:left; 
  list-style:none; 
  font-size:1em; 
  margin:0; padding:0;

}

#toggle-item li { 
  width:100%;
  float:left; 
  margin:0.5em 0.5em;
  padding-bottom: 0.5em; 
  border-bottom:1px solid #fbfbfb; 
  position:relative; 
}

#toggle-item h3 { 
  width:100%;
  float:left;  
  margin:0; 
  font-size:1.2em; 
  color:#9f9f9f; 
}

#toggle-item span { 

  position:absolute; 
  right:5px; 
  top:0; 
  color:#9f9f9f; 
  font-size:1em;cursor:pointer; 

}

.icon-minus-square { color:#56d4d9; }
  
#toggle-item p {

  font-size:0.9em;
  color:#9f9f9f;  
  margin:0.8em 0;
  padding-right:1em; 
  display:none;
  float:left;
  width:100%;  

} 

Segui o script para dar o efeito Toogle:

$(document).ready(function () {
	
	$('#toggle-item li').click(function () {

		var text = $(this).find('p');

		if (text.is(':hidden')) {
			text.slideDown('220');
			$(this).find('span').html('<i class="icon icon-minus-square"></i>');		
		} else {
			text.slideUp('220');
			$(this).find('span').html('<i class="icon icon-plus-square"></i>');		
		}
		
	});
    
    //Ignora os Filhos
	$("#toggle-item li, h3, p, a").click(function(e) {
        e.stopPropagation();
    });

});

Baixar Código Veja Funcionando

Publicado por: loopnerd

675 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado.