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

JavaScript

Jquery toggle

Here is my website in code pen: http://codepen.io/anon/pen/bItsg I want the portfolio and contact div to act the same as the about div. Any suggestions?

3 Answers

Maciej Czuchnowski
Maciej Czuchnowski
36,441 Points
//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();
    $(".portfolioContent").hide();
    $(".contactDetails").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");
            }
            if($(this).attr("id") == "Portfolio") {
                //...and then if it DOES, make the .aboutMe paragraph inside fade out...
                $(".portfolioContent").fadeOut("slow");
            }
            if($(this).attr("id") == "Contact") {
                //...and then if it DOES, make the .aboutMe paragraph inside fade out...
                $(".contactDetails").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");
            }
            if($(this).attr("id") == "Portfolio") {
                //...and then if it DOES, make the .aboutMe paragraph inside fade in...
                $(".portfolioContent").fadeIn("slow");
            }
            if($(this).attr("id") == "Contact") {
                //...and then if it DOES, make the .aboutMe paragraph inside fade in...
                $(".contactDetails").fadeIn("slow");
            }
        }

    });

});
Maciej Czuchnowski
Maciej Czuchnowski
36,441 Points

This can be DRYed out, I only copied and pasted some of your own code. But it works.

I want them to act the same as the about div for example: my email address should be hidden until clicked

Thankyou! Thats my next task! I understand there is a lot of code that needs to be condensed. Thanks for your help!