Apologies for the confusing title, I didn't know a better way to phrase it ;; (and was running out of character space to type it out)

I'm trying to make new standard profiles for my pets, to hopefully be able to be more productive with them. Though there's several things I want to add, and I'm not quite sure how. ; v;

First one is, I think, more simple: when I make div transitions, in this instance, changing a height to a bigger one, the box stretches downwards. What I'm hoping to achieve is for the box to stretch upwards, but I'm not entirely sure how to do that? ;; I've tried digging in w3schools but I haven't found much...

image example in case my words are hard to understand

Second is probably harder... and I'm less sure how to explain it. You know those profiles that have a main div, then a number of buttons, and when you click a button, whatever is there on the main div changes to something else? No transitions or anything. I used to know how to do this, but now that I've given that code a spin, it didn't work, so... I'm not really sure how to do that now, either...

And, what I was actually more intrigued by... is there a way to make several divs change when you get click a button, like the ones described previously? To use an example, if you clicked button A, div , and would change to something else at the same time. Same with button B, C, etc.. Is it possible to do this?

another image example for this bit bc I'm bad at explaining stuff

Thanks in advance. :'D (if I need to make myself more clear, I can try that too!)

the only way i've found to make divs expand upwards is to position them from the bottom instead of the top.

the second thing you're describing is called anchor tabs. basically what you need to do is create multiple divs in the same location, but set them to "visibility: hidden" and set the :target pseudo-class to "visibility: visible" which means they will only be visible when "targeted" by a link being clicked. then create the buttons/links and have them link to the name of each div. you could achieve this effect on multiple divs at once if they are wrapped within a single larger div, so you could have for instance div one contain div oneA, oneB, and oneC, div two contain div twoA, twoB, and twoC, etc. so for instance (and this is presuming you make a separate div for your buttons):

<style> , , { position: absolute; left: 100px; top: 100px; width: 900px; height: 300px; visibilty: hidden}

, , { position: relative; left: 0; top: 0; width: 300px; height: 300px; background: ; display: inline}

, , { position: relative; left: 300px; top: 0; width: 300px; height: 300px; background: ; display: inline}

, , { position: relative; left: 600px; top: 0; width: 300px; height: 300px; background: ; display: inline}

:target, :target, :target {visibility: visible} </style>

ONE | TWO | THREE

content of div oneB

content of div twoB

content of div threeB