Change content by clicking icon and change icon

Question

Change content by clicking icon and change icon

Navigation

#1 by (5 votes)

2

I have the following situation: two divs that are displayed by clicking icons. Each screen has an icon and a specific content, it would be a toggle, but the content and the icon. I left attached an image of what it would be and here is an idea of what the icon change would be: link

javascript

asked by anonymous 30.05.2016 / 01:27

1 answer

Lambda, Where with subquery Concatenating Javascript Object

score 5 · Accepted Answer

For your jsfiddle I see that you use jQuery .

Do this:

$('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><ahref="#">Click me! <i class="fa fa-plus-circle"></i></a>
<div class="content active">
   + div plus
</div>
<div class="content">
   - div minus
</div>

JSFIDDLE sample