CODEWITHSUNDEEP
javascriptjqueryhtmlcsstoggle
Becky
Becky

Reputation: 2275

Toggle not showing container

I have a system made up to toggle different sections. It works pretty much how I want it, except for some reason all of the content within the div project-name-block-container does not show when I click on the different blocks. The images show in the first block, but that's it. Shouldn't all of the content show since I wrapped all of it with a div?

Also is there a way to keep the functionality of what I have the same, except change one thing. instead of being able to click in the project-name-block to toggle the blocks, is there a way to make it where the user has to click the title?

var allPanels = $('.project-name-block-container').hide();
//$('.project-name-block:eq(0) .project-name-description').show();
$('.project-name-block').click(function() {
  allPanels.slideUp();
  $(this).children('.project-name-block-container').slideDown();
  return false;
});
#project-section-container {
  height: auto;
}
.project-name-block {
  border-top: 1px solid black;
  width: 100%;
  cursor: pointer;
  padding: 50px 0;
  text-align: center;
}
.project-name-title {
  color: blue;
  font-size: 2em;
}
.project-name-description {
  display: none;
  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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="project-name-block">
  <div class="project-name-title">Project 1</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">
      <img src="images/projects/project2.jpg" alt="Demolition Project" class="project-img">
    </div>
  </div>
</div>
<div class="project-name-block">
  <div class="project-name-title">Project 2</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</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</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</div>
  <div class="project-name-block-container">
    <div class="project-name-description">This is the text for Project 5</div>
  </div>
</div>
</div>

Upvotes: 1

Views: 68

Answers (2)

DaniP
DaniP

Reputation: 38252

You have display:none for the description ... remove that

 .project-name-description {
    /*display: none;*/ REMOVE THIS LINE
    font-size: 1em;
    margin-top: 25px;
 }

And if you want the title of the project trigger the function just change that selector and instead of children use next:

var allPanels = $('.project-name-block-container');
$('.project-name-title').click(function() {
  allPanels.slideUp();
  $(this).next('.project-name-block-container').slideDown();
  return false;
});
#project-section-container {
  height: auto;
}
.project-name-block {
  border-top: 1px solid black;
  width: 100%;
  cursor: pointer;
  padding: 50px 0;
  text-align: center;
}
.project-name-title {
  color: blue;
  font-size: 2em;
}
.project-name-description {
  font-size: 1em;
  margin-top: 25px;
}
.project-image-container {
  width: 90%;
  margin: 50px 5%;
}
.project-img {
  width: 30%;
  height: auto;
}
.project-name-block-container {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="project-name-block">
  <div class="project-name-title">Project 1</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">
      <img src="images/projects/project2.jpg" alt="Demolition Project" class="project-img">
    </div>
  </div>
</div>
<div class="project-name-block">
  <div class="project-name-title">Project 2</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</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</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</div>
  <div class="project-name-block-container">
    <div class="project-name-description">This is the text for Project 5</div>
  </div>
</div>
</div>

Additional:

As an improvement to your actual code and if you want to "toggle" the element check this snippet:

$('.project-name-title').click(function() {
  var relative = $(this).next('.project-name-block-container');
  if (!relative.hasClass('opened')) {
    $('.opened').slideUp().removeClass('opened');
    relative.addClass('opened').slideDown();
  } else {
    relative.slideUp().removeClass('opened');
  }
  return false;
});
#project-section-container {
  height: auto;
}
.project-name-block {
  border-top: 1px solid black;
  width: 100%;
  cursor: pointer;
  padding: 50px 0;
  text-align: center;
}
.project-name-title {
  color: blue;
  font-size: 2em;
}
.project-name-description {
  font-size: 1em;
  margin-top: 25px;
}
.project-image-container {
  width: 90%;
  margin: 50px 5%;
}
.project-img {
  width: 30%;
  height: auto;
}
.project-name-block-container {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="project-name-block">
  <div class="project-name-title">Project 1</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">
      <img src="images/projects/project2.jpg" alt="Demolition Project" class="project-img">
    </div>
  </div>
</div>
<div class="project-name-block">
  <div class="project-name-title">Project 2</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</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</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</div>
  <div class="project-name-block-container">
    <div class="project-name-description">This is the text for Project 5</div>
  </div>
</div>
</div>

Upvotes: 2

cssyphus
cssyphus

Reputation: 40076

This should do the trick. You had display:none on the project-name-description div, which left nothing to display.

var allPanels = $('.project-name-block-container').hide();
//$('.project-name-block:eq(0) .project-name-description').show();
$('.project-name-title').click(function() {   
  allPanels.slideUp();
  $(this).parent().find('.project-name-block-container').slideDown();
  return false;
});
.project-name-description{font-size:3rem;}
#project-section-container {
	height: auto;
}
.project-name-block {
	border-top: 1px solid black;
	width: 100%;
	cursor: pointer;
	padding: 50px 0;
	text-align: center;
}
.project-name-title {
	color: blue;
	font-size: 2em;
}
.project-name-description {
	XXdisplay: none;
	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;
	
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="project-name-block">
	<div class="project-name-title">Project 1</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">
			<img src="images/projects/project2.jpg" alt="Demolition Project" class="project-img">
		</div>
	</div>
</div>

<div class="project-name-block">
	<div class="project-name-title">Project 2</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</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</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</div>
	<div class="project-name-block-container">
		<div class="project-name-description">This is the text for Project 5</div>
	</div>
</div>

Upvotes: 1

Related Questions