CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Becky
Becky

Reputation: 2275

Getting a slideToggle to expand and show hidden content

I am trying to get a menu to show only the titles on page load. Then when you click on a menu title or a .project-name-block the menu item expands and shows the description for the item clicked on. Right now this makes the menu item completely disappear. I commented out the way I was trying to get the description to show as it wasn't working.

Side note...how could I get the first project-name-block to be fully expanded on page load?

UPDATE:

I changed my javascript to this, but I cannot figure out how to only get the box I clicked on to only show that specific description and not all three..

$('.project-name-block').click(function() {
  //$(this).slideToggle('slow');
  $('.project-name-description').slideToggle('slow');
  //$(this).attr('project-name-description').show();
});

Original code:

$('.project-name-block').click(function() {
  $(this).slideToggle('slow');
  //$(this).attr('project-name-description').show();
});
.project-name-block {
	border-top: 1px solid black;
	padding: 20px 10px;
	width: 30%;
}
.project-name-title {
	color: blue;
	font-size: 2em;
}
.project-name-description {
	display: none;
	font-size: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="project-name-container-right">
				<div class="project-name-block">
					<div class="project-name-title">Project 1</div>
					<div class="project-name-description">This is the text for Project 1</div>
				</div>
				<div class="project-name-block">
					<div class="project-name-title">Project 2</div>
					<div class="project-name-description">This is the text for Project 2</div>
				</div>
				<div class="project-name-block">
					<div class="project-name-title">Project 3</div>
					<div class="project-name-description">This is the text for Project 3</div>
				</div>
			</div>

Upvotes: 0

Views: 43

Answers (2)

Mukesh Ram
Mukesh Ram

Reputation: 6338

You want to like this:

JS:

var allPanels = $('.project-name-description').hide();
$('.project-name-block:eq(0) .project-name-description').show();
$('.project-name-block').click(function() {   
  allPanels.slideUp();
  $(this).children('.project-name-description').slideDown();
  return false;
});
.project-name-block {
	border-top: 1px solid black;
	padding: 20px 10px;
	width: 30%;
}
.project-name-title {
	color: blue;
	font-size: 2em;
}
.project-name-description {
	display: none;
	font-size: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="project-name-container-right">
				<div class="project-name-block">
					<div class="project-name-title">Project 1</div>
					<div class="project-name-description">This is the text for Project 1</div>
				</div>
				<div class="project-name-block">
					<div class="project-name-title">Project 2</div>
					<div class="project-name-description">This is the text for Project 2</div>
				</div>
				<div class="project-name-block">
					<div class="project-name-title">Project 3</div>
					<div class="project-name-description">This is the text for Project 3</div>
				</div>
			</div>

Upvotes: 1

hgh
hgh

Reputation: 51

$(document).ready(function() {
      $('.project-name-block:eq(0)').slideDown('slow');
})

Upvotes: 0

Related Questions