Tenho a seguinte situação: duas divs que são exibidas clicando em ícones. Cada tela tem um ícone e um conteúdo específico, seria um toggle, mas do conteúdo e do ícone. Deixei anexo uma imagem do que seria e aqui uma ideia do que seria a mudança do ícone: http://jsfiddle.net/xdC29/
1 Resposta
Pelo seu jsfiddle vejo que usa jQuery.
Faça assim:
$('a').click(function() {
$(this).find('i').toggleClass('fa-minus-circle fa-plus-circle');
$('.content').toggleClass('active');
});
.content.active {
display:block;
}
.content {
display:none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Click me! <i class="fa fa-plus-circle"></i></a>
<div class="content active">
+ div plus
</div>
<div class="content">
- div minus
</div>
-
A troca do ícone está ok, eu precisaria que além de trocar o ícone exibisse duas divs com conteúdos diferentes. Digamos quando escolho o ícone "mais" apareça um conteúdo específico para ela. E quando for o "menos" que seja outro conteúdo. Commented 30/05/2016 às 12:37
-