Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Shaun Kelly
35,560 PointsHelp with jquery toggle
Hi, I have designed a website using the same functionality as this: http://codepen.io/erikmcclintock/pen/FmvAn however I need different content within each separate div. I am unsure on how to achieve this! The first div has been completed. The second and third divs have id's called "portfolio" and "contact" Any help would be appreciated! Thanks!
3 Answers
anguswhiston
17,225 PointsWhere the text says "I was hidden now I am not" in the <p> you can just put in whatever 'content' you want. You can put it in more divs, images, anything really.
Maciej Czuchnowski
36,441 PointsYou have three divs, clicking each one expands a different div. And it works. What is the question?
Shaun Kelly
35,560 Pointsi need different content in each div
Maciej Czuchnowski
36,441 PointsUm...so you need to type that different content in those divs. Check your link, I made some modifications.
OK, the changes are gone, but generally do what Angus wrote below :)
Shaun Kelly
35,560 PointsOkay my fault, my code is slightly different to the link. I have 3 divs, each has different content however in 1 div the text is hidden however i want the text in all 3 to be hidden until clicked. Here is the query i have:
//this is necessary at the top of your jquery doc to tell the script when to load, which in this case, is once the DOCUMENT (your webpage) is READY
$(document).ready(function(){
//hide the .aboutMe paragraph when the page first loads
$(".aboutMe").hide();
//listen for anything with a class of .section to be clicked, then run the code within
$(".section").click(function(){
//check to see if THIS div (the div that was clicked) has a class of .expanded...
if($(this).hasClass("expanded")) {
//...and then if it DOES have the class .expanded, first REMOVE that class and then ADD the class .collapsed...
$(this).removeClass("expanded").addClass("collapsed");
//...and then check to see if the div is the one with the ID of #about...
if($(this).attr("id") == "about") {
//...and then if it DOES, make the .aboutMe paragraph inside fade out...
$(".aboutMe").fadeOut("slow");
}
} else {//if THIS div (the div that was clicked) does NOT has a class of .expanded, then...
//...REMOVE the class .collapsed, and then ADD the class .expanded...
$(this).removeClass("collapsed").addClass("expanded");
//...and then check to see if the div is the one with the ID of #about...
if($(this).attr("id") == "about") {
//...and then if it DOES, make the .aboutMe paragraph inside fade in...
$(".aboutMe").fadeIn("slow");
}
}
});
});
Maciej Czuchnowski
36,441 PointsCan you publish all the code, including HTML and CSS somewhere? jQuery itself doesn't say much without the source it operates on ;)
Shaun Kelly
35,560 Points<!DOCTYPE HTML>
<html>
<head>
<title>Shaun David Kelly | Front End Developer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="css/style.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="javascript/expand.js"></script>
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,300italic,400,400italic,900,900italic" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<h2 class="heading">SDK <span> FRONT END DEVELOPER</span></h2>
<div id="about" class="section collapsed">
<p class="div_header">ABOUT</p class="div_header">
<p class="aboutMe">Hey! Im Shaun, a self taught web design & developer from Birmingham, West Midlands. Thanks for taking the time to check out my portfolio! Feel free to browse through my work and explore my vision of simplicity. I am currently seeking employment as a Junior Web Designer/Developer.</p>
</div>
<div id="Portfolio" class="section collapsed">
<p class="div_header">PORTFOLIO</p class="div_header">
<p class="portfolioContent">Under Construction! Coming Soon!</p>
</div>
<div id="Contact" class="section collapsed">
<p class="div_header">CONTACT</p class="div_header">
<p class="contactDetails">Shaundavidkelly@gmail.com</p>
</div>
</div>
</body>
</html>
body, html {
width: 960px;
margin: 0 auto;
background-color: #353535;
}
.container {
margin-top: 70px;
padding-bottom: 170px;
}
a {
text-decoration: none;
}
/*------Heading------*/
.heading {
font-family: "Lato";
color: #fff;
font-size: 30px;
}
span {
color: #808080;
font-size: 18px;
font-family: tahoma;
}
/*All Divs
///////////////////////////////*/
.section {
background-color: #555555;
padding-left: 10px;
font-family: "Lato";
font-weight: bold;
color: #303030;
transition: all 1.3s ease;
width: 960px;
height: 150px;
margin-bottom: 7px;
}
.div_header {
font-size: 30px;
display: inline-block;
margin-top: 7px;
}
.expanded {
height:550px;
}
.collapsed {
height: 150px;
}
/*------About Div------*/
#about {
-webkit-border-top-right-radius: 30px;
-moz-border-top-right-radius: 30px;
border-left: 8px #A625FF solid;
}
#about:hover {
background-color: #A625FF;
color: #000;
}
.aboutMe {
padding: 20px;
font-size: 22px;
color: #252525;
position: relative;
z-index: 10;
}
/*------Portfolio Div------*/
#Portfolio {
border-left: 8px #FFB93F solid;
}
#Portfolio:hover {
background-color: #FFB93F;
color: #000;
}
/*------Contact Div------*/
#Contact {
border-left: 8px #09CC5C solid;
}
#Contact:hover {
background-color: #09CC5C;
color: #000;
}
anguswhiston
17,225 PointsHere I put it all in codepen for you. Easier to look at it that way. http://codepen.io/anon/pen/bItsg
anguswhiston
17,225 Pointsanguswhiston
17,225 Pointshttp://codepen.io/anon/pen/Cxpkn