treehouse : what would you like to learn today?
Web Design Web Development iOS Development

How to change a class positioning via jquery

  • Hi there, I am using some jquery to call another class. Basically - upon clicking h1 it is calling an "expanded" div to show more info ect. I am wondering how I can bump up the expanded paragraph text up into the padding or the h1. I would not want to change all other h1's properties on the page... if that makes any sense.

    Example here: http://codepen.io/wragen22/full/sqrlD

  • Like This?

    Instead of giving h1 the 50px padding, I recommend giving the article element the padding.

  • I've tried that.. for some reason there is no change happening. I wonder if it's because I've added the "pointer" js class. It should just be inheriting h1 properties though. Not sure what is going on.

  • Have you tried this?

    h1 { font-size: 2em; text-align: center; } article { padding: 50px; }

  • So trying that. The font size decreases greatly and space between items increases. By increasing size the padding is still there as well. Forgive my ignorance..

  • I think you may have added the code I gave you to the end of your stylesheet. What I meant was delete padding: 50px; from your h1 class. Then add article { padding: 50px; }.

    Does that help?

    Edit: Did you look at the changes I made ?

  • I did do that. Still having issues.. For some reason the h1 is keeping padding.. the pointer I created is being shown in the chrome inspector. Maybe that has something to do with it.

  • Do you wanna post your updated codepen?

  • Weirdest thing..code pen is working with your suggested changes - however my project is keeping the padding. I've looked through my css files over and over and cannot find anything that is setting the property. So frustrating.. :-/