how can I make multiple show and hide jquery?

Question

I need to make a jQuery code that every time I click on <li> this span <span id="add_icon" class="fa fa-check"></span> shows and this span hides <span id="add_skill" class="fa fa-plus-circle"></span>

this is my code:

<ul id="skill-job-list" class="available-skill-list">
  <li>
    <div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">

      Business Plans (809 jobs)

      <span id="add_skill" class="fa fa-plus-circle"></span>
      <span id="add_icon" class="fa fa-check"></span>
    </div>
  </li>

  <li>
    <div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">

      Business Plans (809 jobs)

      <span id="add_skill" class="fa fa-plus-circle"></span>
      <span id="add_icon" class="fa fa-check"></span>
    </div>
  </li>
  <li>
    <div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">

      Business Plans (809 jobs)

      <span id="add_skill" class="fa fa-plus-circle"></span>
      <span id="add_icon" class="fa fa-check"></span>
    </div>
  </li>

</ul>

Answer 1

$(".job_item").on("click", function() {
  $(this).find("span").toggleClass("fa-plus-circle fa-check");
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="skill-job-list" class="available-skill-list">
  <li>
    <div data-job="149" title="Business Plans" class="skill-select-bubble job_item">

      Business Plans (809 jobs)

      <span class="fa fa-plus-circle add_skill"></span>
    </div>
  </li>

  <li>
    <div data-job="149" title="Business Plans" class="skill-select-bubble job_item">

      Business Plans (809 jobs)

      <span class="fa fa-plus-circle add_skill"></span>
    </div>
  </li>
  <li>
    <div data-job="149" title="Business Plans" class="skill-select-bubble job_item">

      Business Plans (809 jobs)

      <span class="fa fa-plus-circle add_skill"></span>
    </div>
  </li>

</ul>

First, you can't have the same id for each block, so your id "job_item" should become a class ".job_item", same for "add_skill" and "add_icon" so you can do this :

$(".job_item").on("click", function() {
    $(this).find(".add_skill").hide();
    $(this).find(".add_icon").show();
});

Now if you need to change witch one is hide() and show() for every click, maybe you can try this :

<span id="add_skill" class="fa fa-plus-circle"></span> // keep one and delete the other span

$(".job_item").on("click", function() {
    $(this).find("span").toggleClass("fa fa-plus-circle fa-check");
});

Is this what you are looking for?

Answer 2

Try below code

$('li').on('click', function() {
  $(this).find('.fa-plus-circle').show();
  $(this).find('.fa-check').hide();
});

span.fa-plus-circle {display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<ul id="skill-job-list" class="available-skill-list">
  <li>
    <div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">

      Business Plans (809 jobs)

      <span id="add_skill" class="fa fa-plus-circle"></span>
      <span id="add_icon" class="fa fa-check"></span>
    </div>
  </li>

  <li>
    <div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">

      Business Plans (809 jobs)

      <span id="add_skill" class="fa fa-plus-circle"></span>
      <span id="add_icon" class="fa fa-check"></span>
    </div>
  </li>
  <li>
    <div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">

      Business Plans (809 jobs)

      <span id="add_skill" class="fa fa-plus-circle"></span>
      <span id="add_icon" class="fa fa-check"></span>
    </div>
  </li>

</ul>

Answer 3

$(document).ready(function(){
     $(".fa-plus-circle").hide();
     $(".fa-check").hide();
  $('li').on("click",function(){
    var index  = $(this).index();
     $(".fa-plus-circle:eq("+index+")").toggle();
     $(".fa-check:eq("+index+")").toggle();
  });
      
});

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<ul>
  <li>
    <div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">

      Business Plans (809 jobs)

      <span id="add_skill" class="fa fa-plus-circle">add_skill 1</span>
      <span id="add_icon" class="fa fa-check">add_icon 1</span>
    </div>
  </li>

  <li>
    <div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">

      Business Plans (809 jobs)

      <span id="add_skill" class="fa fa-plus-circle">add_skill 2</span>
      <span id="add_icon" class="fa fa-check">add_icon 2</span>
    </div>
  </li>
  <li>
    <div id="job_item" data-job="149" title="Business Plans" class="skill-select-bubble ">

      Business Plans (809 jobs)

      <span id="add_skill" class="fa fa-plus-circle"> add_skill 3</span>
      <span id="add_icon" class="fa fa-check"> add_icon 3</span>
    </div>
  </li>

</ul>

Answer 4

You can't set same id for multiple html elements.. so set class name for each of them.

 <span id="add_skill" class="fa fa-plus-circle add_skill_class"></span>
  <span id="add_icon" class="fa fa-check add_icon_class"></span>

 $('#skill-job-list').on('click', function(){
      $(this).find('.add_skill_class').hide();
      $(this).find('.add_icon_class').show();
  });