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

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,440 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,440 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!