CODEWITHSUNDEEP
javascriptjquerycsstoggle
Becky
Becky

Reputation: 2289

Interchanging icon images between a toggle

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>

Upvotes: 1

Views: 57

Answers (1)

BenG
BenG

Reputation: 15154

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>

Upvotes: 2

Related Questions