在切换之间交换图标图像

Question

I have two different icons, a minus sign and plus sign. Upon page load all of the .project-name-block 's have a plus sign. When someone would click on a Project title, I want the minus sign to appear to show it has been opened.

I have tried doing the following:

$('.project-name-title').click(function() {
      var relative = $(this).next('.project-name-block-container');
      if (!relative.hasClass('opened')) {
        $('.opened').slideUp(500).removeClass('opened');
        relative.addClass('opened minus-icon').slideDown();
      } else {
        relative.slideUp(500).removeClass('opened add-icon');
      }
      return false;
    });

But it doesn't do the trick. What am I doing wrong?

 $('.project-name-title').click(function() { var relative = $(this).next('.project-name-block-container'); if (!relative.hasClass('opened')) { $('.opened').slideUp(500).removeClass('opened'); relative.addClass('opened').slideDown(); } else { relative.slideUp(500).removeClass('opened'); } return false; }); 

 #project-section-container { height: auto; width: 60%; } .project-name-block-container { display: none; } .project-name-block { border-top: 1px solid #858585; width: 100%; padding: 50px 0; text-align: center; } .project-name-title { color: #072919; font-size: 2em; cursor: pointer; display: block; } .add-icon { margin-left: 10px; height: 20px; width: 20px; } .minus-icon { display: none; } .project-name-description { font-size: 1em; margin-top: 25px; } /*.project-name-description.active { display: block; }*/ /*--Project Images---*/ .project-image-container { width: 90%; margin: 50px 5%; } .project-img { width: 30%; height: auto; } .project-img.left { margin-right: 10%; } .project-img.right { margin-left: 10%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="project-section-container"> <div class="project-name-block"> <div class="project-name-title">Project 1 <img src="http://optimumwebdesigns.com/eslich/icons/add-icon.png" alt="View Demolition and Wrecking Projects" class="add-icon"><img src="icons/minus-icon.png" alt="" class="minus-icon"></div> <div class="project-name-block-container"> <div class="project-name-description">This is the text for Project 1</div> <div class="project-image-container"> <img src="images/projects/project1.jpg" alt="Demolition Project" class="project-img left"> <img src="images/projects/project2.jpg" alt="Demolition Project" class="project-img right"> </div> </div> </div> <div class="project-name-block"> <div class="project-name-title">Project 2 <img src="http://optimumwebdesigns.com/eslich/icons/add-icon.png" alt="View Demolition and Wrecking Projects" class="add-icon"></div> <div class="project-name-block-container"> <div class="project-name-description">This is the text for Project 2</div> </div> </div> <div class="project-name-block"> <div class="project-name-title">Project 3 <img src="http://optimumwebdesigns.com/eslich/icons/add-icon.png" alt="View Demolition and Wrecking Projects" class="add-icon"></div> <div class="project-name-block-container"> <div class="project-name-description">This is the text for Project 3</div> </div> </div> <div class="project-name-block"> <div class="project-name-title">Project 4 <img src="http://optimumwebdesigns.com/eslich/icons/add-icon.png" alt="View Demolition and Wrecking Projects" class="add-icon"></div> <div class="project-name-block-container"> <div class="project-name-description">This is the text for Project 4</div> </div> </div> <div class="project-name-block"> <div class="project-name-title">Project 5 <img src="http://optimumwebdesigns.com/eslich/icons/add-icon.png" alt="View Demolition and Wrecking Projects" class="add-icon"></div> <div class="project-name-block-container"> <div class="project-name-description">This is the text for Project 5</div> </div> </div> </div> </div> 

Answer 1

add the opened class to the title instead on the content, which you can then use to show/hide the relevant icon using css:-

.opened .minus-icon,
.add-icon {
    margin-left: 10px;
    height: 20px;
    width: 20px;
    display: inline;
}

.opened .add-icon,
.minus-icon {
    display: none;
}

also, you need to add the minus image for each instead of just the first.

 $('.project-name-title').click(function() { var relative = $(this); if (!relative.hasClass('opened')) { $('.opened').removeClass('opened').next('.project-name-block-container').slideUp(500); relative.addClass('opened').next('.project-name-block-container').slideDown(); } else { relative.removeClass('opened').next('.project-name-block-container').slideUp(500); } return false; }); 

 #project-section-container { height: auto; width: 60%; } .project-name-block-container { display: none; } .project-name-block { border-top: 1px solid #858585; width: 100%; padding: 50px 0; text-align: center; } .project-name-title { color: #072919; font-size: 2em; cursor: pointer; display: block; } .opened .minus-icon, .add-icon { margin-left: 10px; height: 20px; width: 20px; display: inline; } .opened .add-icon, .minus-icon { display: none; } .project-name-description { font-size: 1em; margin-top: 25px; } /*.project-name-description.active { display: block; }*/ /*--Project Images---*/ .project-image-container { width: 90%; margin: 50px 5%; } .project-img { width: 30%; height: auto; } .project-img.left { margin-right: 10%; } .project-img.right { margin-left: 10%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="project-section-container"> <div class="project-name-block"> <div class="project-name-title">Project 1 <img src="http://optimumwebdesigns.com/eslich/icons/add-icon.png" alt="View Demolition and Wrecking Projects" class="add-icon"> <img src="icons/minus-icon.png" alt="" class="minus-icon"> </div> <div class="project-name-block-container"> <div class="project-name-description">This is the text for Project 1</div> <div class="project-image-container"> <img src="images/projects/project1.jpg" alt="Demolition Project" class="project-img left"> <img src="images/projects/project2.jpg" alt="Demolition Project" class="project-img right"> </div> </div> </div> <div class="project-name-block"> <div class="project-name-title">Project 2 <img src="http://optimumwebdesigns.com/eslich/icons/add-icon.png" alt="View Demolition and Wrecking Projects" class="add-icon"> </div> <div class="project-name-block-container"> <div class="project-name-description">This is the text for Project 2</div> </div> </div> <div class="project-name-block"> <div class="project-name-title">Project 3 <img src="http://optimumwebdesigns.com/eslich/icons/add-icon.png" alt="View Demolition and Wrecking Projects" class="add-icon"> </div> <div class="project-name-block-container"> <div class="project-name-description">This is the text for Project 3</div> </div> </div> <div class="project-name-block"> <div class="project-name-title">Project 4 <img src="http://optimumwebdesigns.com/eslich/icons/add-icon.png" alt="View Demolition and Wrecking Projects" class="add-icon"> </div> <div class="project-name-block-container"> <div class="project-name-description">This is the text for Project 4</div> </div> </div> <div class="project-name-block"> <div class="project-name-title">Project 5 <img src="http://optimumwebdesigns.com/eslich/icons/add-icon.png" alt="View Demolition and Wrecking Projects" class="add-icon"> </div> <div class="project-name-block-container"> <div class="project-name-description">This is the text for Project 5</div> </div> </div> </div> </div>