Change content by clicking icon and changing icon

Asked

Viewed 3,233 times

2

I have the following situation: two Ivs that are displayed by clicking icons. Each screen has an icon and a specific content, would be a toggle, but content and icon. I left attached an image of what it would be and here an idea of what would be the change of the icon: http://jsfiddle.net/xdC29/inserir a descrição da imagem aqui

javascript

1 answer

6


From your jsfiddle I see you use jQuery.

Do so:

$('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>

example JSFIDDLE

  • Changing the icon is ok, I would need that in addition to changing the icon display two Divs with different contents. Let’s say when I choose the "more" icon there is a specific content for it. And when "less" is another content.

  • I’ll do that. Hold on a second

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.