Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Help 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
anguswhiston
17,225 Points

Where 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
Maciej Czuchnowski
36,440 Points

You have three divs, clicking each one expands a different div. And it works. What is the question?

i need different content in each div

Maciej Czuchnowski
Maciej Czuchnowski
36,440 Points

Um...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 :)

Okay 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
Maciej Czuchnowski
36,440 Points

Can you publish all the code, including HTML and CSS somewhere? jQuery itself doesn't say much without the source it operates on ;)

<!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 &amp; 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
anguswhiston
17,225 Points

Here I put it all in codepen for you. Easier to look at it that way. http://codepen.io/anon/pen/bItsg