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

Posted June 8, 2014 3:45pm by

On click expand height?

Hi guys so my portfolio website has 3 divs. Each has a width of 900px and a height of 150px. They are of a banner sort of size however what i am trying to achieve is when the user clicks one of the divs i want the height to expand larger and display content that was previously hidden. I have tried the 'active' tag but this doesn't work. is it possible with css and html?

June 12, 2014 6:31am

Hi erik, I still haven't managed to complete this because i have no experience using javascript. I want my website to be along the same lines as this http://codepen.io/erikmcclintock/pen/FmvAn

I was wondering if you could point me in the right direction. Or help me with the coding. Here is my code i already have:

<!DOCTYPE HTML>
<html>
<head>
    <title>Shaun David Kelly | Web Design & Developer</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="css/style.css" rel="stylesheet" media="screen">
</head>
<body>
        <div class="container">



            <h2 class="heading">SDK <span>Web Design & Developer</span></h2>

        <div class="about">
          About
          <p class="aboutMe">Hello! 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>


        <a href="#"><div class="Portfolio">
          Portfolio
        </div></a>

        <a href="#"><div class="Contact">
          Contact
        </div></a>



    </div>

</body>
</html>

body, html {
    width: 960px;
    margin: 0 auto;
    background-color: #353535;
}

.container {
    margin-top: 70px;
    padding-bottom: 40px;
}

a {
    text-decoration: none;
}

/*------Heading------*/

h2 {
    font-family: Arial;
    color: #fff;
}

span {
    color: #808080;
    font-size: 18px;
}

/*------All Divs------*/

.about, .Portfolio, .Contact {
    background-color: #555555;
    padding-left: 10px;
    font-size: 30px;
    font-family: arial;
    color: #303030;
    transition: all 1.3s ease;
    width: 960px;
    height: 150px;
    margin-bottom: 7px;
}

/*------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;
}

.about:active {
    height: 550px;
    background-color: #555555;
}


/*------Portfolio Div------*/

.Portfolio {
    border-left: 8px #FFB93F solid;
}

.Portfolio:hover {
    background-color: #FFB93F;
    color: #000;
}

.Portfolio:active {
    height: 550px;
    background-color: #555555;
}

/*------Contact Div------*/

.Contact {
    border-left: 8px #09CC5C solid;
}

.Contact:hover {
    background-color: #09CC5C;
    color: #000;
}

.Contact:active {
    height: 550px;
    background-color: #555555;
}

.aboutMe {
    padding: 20px;
    font-size: 25px;
    color: #252525;
    font-family: arial;
    visibility: hidden;
}

June 13, 2014 4:22am

Shaun,

My apologies for the late reply.

This is totally understandable, especially if you haven't worked with JavaScript/jQuery before. No worries! I've gone through your code and have some tips, and have put together a working version of this on codepen for you to check out.

http://codepen.io/erikmcclintock/pen/rtmyl

In your code, I have commented out the sections that are unnecessary or that can be done more efficiently, and have added corresponding numbered notes at the bottom of the respective files to explain.

For reference, you need to download and include jQuery into your project before it will work for you. Go to http://jquery.com/download/ to read more about it, but for now, you can just copy the two script tags in the head section of my html file on codepen. Just make sure that for the second script's src attribute, you point to the actual .js file that you create (just like you would for pointing to a CSS stylesheet).

jQuery is a very helpful library that makes working with JavaScript a bit faster and easier, and adds some slick functionality with just a couple function calls. Treehouse has some good introductory courses to both JavaScript and jQuery, and you can find plenty more online and in books. Some that I recommend are http://www.codecademy.com and the Head First series of books by O'Reilly Media (http://www.headfirstlabs.com/).

Let me know if this makes sense!

Erik

2 Answers

June 8, 2014 5:50pm

Shaun,

To cause the divs to expand and collapse on click (or hover, etc), you should introduce a little JavaScript or jQuery into your site. Remember: HTML is for structure, CSS is for presentation, and JavaScript is for behavior. Since you're looking for a behavioral effect, you will find an easy-to-implement solution in the part of web development designed for just that!

For more information, check out this documentation:

http://api.jquery.com/slidedown/

From there, you can also look into the toggle() method, and continue poking around for more options and ideas.

Hope this helps point you in the right direction!

Erik

June 8, 2014 5:59pm

Thanks! this has helped a lot! Because I am adjusting the height, does this mean i will have to put the styles into the html code?

Also a quick question....I understand that theres lots of languages that do different things when building websites but is it common for a web developer to use various languages on one website? sounds like a dumb question but I'm just ensuring this is what web developers do.

June 8, 2014 7:17pm

Shaun,

Whenever possible (which is most of the time), you'll want to avoid putting styles directly into your HTML elements/documents. Your code will be much cleaner, easier to follow, and much easier to debug if you keep things where they're meant to be placed; i.e. structure in your HTML, styles in your CSS, and behavior/interactivity in your JavaScript (and any back-end languages that you might implement, if/when necessary, such as PHP).

If you want to expand and collapse the same div as you click on it, you could do something like the following (http://codepen.io/erikmcclintock/pen/glciJ), where you declare a few classes and/or ids in your CSS file that have pre-determined styles, and in your JavaScript/jQuery, you add and remove classes dynamically on the click event for the given div.

Note, this option in itself does not provide the smooth, transitioning effects that other jQuery methods (such as slideToggle()) offer, so if you want something that looks a little better, you could add hidden sibling divs to the main, clickable divs that are toggled with jQuery methods on click to become visible (http://codepen.io/erikmcclintock/pen/FmvAn).

Alternatively, you could look into a newer option: CSS transitions. This may not give you exactly what you're looking for, though, as I don't believe there is a way to check for a click event using just HTML and CSS, and I'm not sure it'd be as easy to hide and reveal information this way. As this is purely a CSS effect, it won't do much as far as the functionality of the site. But it's still something fun to look into and play around with (http://codepen.io/erikmcclintock/pen/qhFwf)!

Also, note that I have not bothered to style either example with padding or to look stylish at all; they are simply thrown together quickly to illustrate the expanding and collapsing techniques. Additionally, the reason it looks like the divs are resizing their width or that the page is jumping when you click is because the height of the page is extending below the viewport when you click, and thus your browser creates a scrollbar, which is what is manipulating the apparent width. If you give the demo section of the page more room, that will go away. But be aware that that's a possibility if/when you extend beyond the viewport height.

However you want to do it, there are always a couple different solutions to choose from!

Now, to answer your other question: yes! It is not only perfectly okay, but it is expected that any given site and/or application will use a multitude of languages, frameworks, tools, etc. to get the job done. As you said, different languages serve different purposes and solve different problems, and that's exactly what they're there for. If you need interactivity in your site, JavaScript and its libraries are great solutions. If you need contact forms, shopping carts, registration forms, etc., you'll want to throw in some back-end functionality with things like PHP and MySQL. Perhaps you want to cut out some styling time and use a framework like Foundation or Bootstrap to help your site come together, or maybe you want to cut out most all the coding altogether and use a service like WordPress. There are always a ton of different ways to go about any given situation, and there is always more to learn!

By coming here and asking questions, you are on the path to success. One of the best skills you can develop in this field is the ability to not only know when you need help, but having the guts to ask. Even after you've become a veteran developer, you'll still be on Google and forums on sites like this searching for answers, and by then, giving answers! Keep asking, keep learning, keep coding!

Hope this helps!

Erik

June 14, 2014 5:54am

This has been a massive help! I can't thank you enough! I have learnt a lot just from your answers! Hopefully this could be the first step to a future in web development!

June 14, 2014 3:47pm

Glad to be of assistance! Keep trucking along and you'll be a working web developer before you know it.

And, as always, feel free to come back to the forums and ask more questions as necessary!

Erik

June 8, 2014 4:16pm

Hi Shaun,

Could you please post the code you're using to change the height.

June 8, 2014 5:05pm

I havent coded it yet. that is why i am asking

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Shaun Kelly

Shaun Kelly

On click expand height?

Shaun Kelly

Shaun Kelly

Erik McClintock

Erik McClintock

2 Answers

Erik McClintock

Erik McClintock

Shaun Kelly

Shaun Kelly

Erik McClintock

Erik McClintock

Shaun Kelly

Shaun Kelly

Erik McClintock

Erik McClintock

Chris Shaw

Chris Shaw

Shaun Kelly

Shaun Kelly