Hi all, I'm trying to design a simple dropdown/slide out content section, and position elements (e.g., stats, spotlight) inside of it. I've looked through the forums, searched for keywords on google with "site:subeta.net", checked w3schools, etc, and I still don't have any answers. I'm sure it's very basic, I've seen it used on enough pet profiles, but my eyes are physically strained at this point trying to figure this out on my own. Help please? Thank you in advance.

@ Vanitas

mailed you!

I would also like to know this...I can't figure it out.

it's actually not too hard, you just have to fiddle with the numbers until things look right! you can see a horizonal sliding tab on frosix's profile, and a couple vertical tabs on saucerer's profile.

basically you'd style and position the section as usual, but then add the following:

{ width: 300px; height: 200px; max-width: 0px; transition: max-width 0.5s ease-in-out; overflow: hidden} :hover {max-width: 300px}

to summarize line by line: 1. i define the dimensions of my div as i normally would. 2. i define the max width as 0, therefore making the div display as 0 pixels wide when not hovered over. 3. i set the transition speed for when people hover over the div; i like to put this here instead of in the :hover section because it allows the transition animation to function both ways (extending and retracting) instead of "snapping" back in when a user moves their cursor off the div in the middle of the animation. the number (in this case 0.5s, half a second) can be changed to make the animation faster or slower. ease-in-out refers to an animation that starts slowly, speeds up in the middle, then slows down again at the end. at half a second it doesn't make much of a difference, so i just use it as my default, but you can look up different types of easing if you want to get super fancy. 4. i set overflow to hidden so the content of the div does not display outside its bounds while retracted. 5. i set the max-width on :hover to match the original width i set on line one. these numbers must be the same or the code will not work. this makes it so that when you hover over the div, it will expand to the stated width; and when you stop hovering over it, it will retract to 0.

NOTES:

• this is for changing the width of the div; you can swap every instance of "width" and "max-width" for "height" and "max-height" to achieve the same result on the vertical axis. just make sure the numbers match up like i explained in step 5.
• you will need to use borders or padding to have a visible "piece" of the div that users can actually hover over. so for instance, this is the styling on saucerer's pet_spotlight section:

and here's the styling for frosix's stats section:

phew, ok let me know if any of that was confusing or incomprehensible! i'm happy to clarify further.

- Sorry I didn't reply to this! It's been a hectic month. Thank you so much for the detailed (and fully comprehensible, don't worry!) response. You certainly helped me, and who knows how many other people who stumble on this post ❤

I want to use horizontal tabs that open left instead of right and vertical tabs that open up instead of down. How do you code these? I've never been able to figure these out. Can you help, please?

it's the same code, but instead of positioning from the left, you'd define positioning from the right for horizontal tabs, and bottom instead of top for vertical tabs.

I finally got the horizontal tab that opens from right to left to work and the size and colors I wanted. I know it seems stupid but it took me hours and hours of frustration. I never could get the vertical tab that opens from the bottom up. I really want it for the pet spotlight. PLEASE could you write the code for it including the colors, font, and size of type, (then I can sub what I want) and include the trophy for when/if the profile wins? I will gladly pay you for it of course, and will give you credit every time I use this code as well as the right to left. OMG I would so appreciate it!