On a website I have a pane that can be expanded to show additional information. The "show more" button (red square 3) turns into a "show less" button when expanding it.
What results in better UX? The button staying on top (red square 1) when expanding it or the button going down to the bottom of the expanded pane (red square 2)? Or is there a completely different way to let users expand/collapse content that's even more user-friendly?
It's good to keep buttons in the same place.
Here is a use case that could be pretty common. Let's say a user wants to just quickly glance at the additional information for the meeting. It's easier for the user to put the mouse in one location and click to expand (and retract), as opposed to clicking, expanding, moving the mouse to the new button location, then retracting. It's less mouse movement on the part of the user.
Along with the icon change and dropdown motion, this should be enough visual feedback for the user that their next click action in the same location will retract the dropdown they just expanded.
Here is an example of what I am talking about. This is how the dropdown would start:
As you can see, the arrow is point down to indicate to the user that there is more content. Then once it's clicked, this is how it would look to the user.
The button would stay in the same location, but the arrow would change directions, indicating to the user that if they click in the same location, the dropdown will collapse.
In this particular example, they had the button change colors as well. For your particular case, I don't know that you need the arrow color to change, but it couldn't hurt to do some user testing to find out what your users prefer.
In general you don't want your controls to move. All generalities in UX are subject to the specific context and workflow of the user, but it's a good baseline.
Digging a little deeper into the reasoning behind hiding the information, you need to consider the user looking at this screen.
The information hidden within the collapsable area doesn't seem necessary to the task. It isn't editable and only shows what you'll be joining when clicking "Join". If that information is useful to all users, hiding it is doing them a disservice. If that information is only useful to advanced users (who might be using it to connect to that server from an external tool), then you really haven't given them any way of knowing what information is hidden behind the toggle.
Adding extra controls to a screen can often slow down a user. If 90% of your use cases are just clicking Join, you're slowing down some percent of users who see the button and want to know what it does. Is saving three lines of vertical space worth it?
For the advanced user looking to copy this data from one screen to another, I'd ask if you even need to close the panel. If all they are going to do is transcribe or copy'n'paste the data into another screen, the next step is probably just to close the window.
If you had more information on the use cases for the screen, we might be able to provide a little more insight. Ultimately it all come down to your users!
Good luck!
Microsoft's Ribbons are an interesting example.
In Office 2013, there's a button at the bottom of the ribbon to close it (A), and no button to bring it back immediately (there is a button next to the minimize button that opens a menu to select how the ribbon should behave however). Instead. you need to click one of the tabs to temporarily open the ribbon, then click the pin icon (C) at the former location of the triangle:
download bmml source – Wireframes created with Balsamiq Mockups
In Explorer on Windows 8, there's a triangle button in the same row like the tabs. It either points up or down and toggles the ribbon (B and D).
If I remember correctly, Ribbons in Office 2007 and 2010 had a triangle button at the right bottom of the ribbon to close it (A), but a button in the row of the tabs to open it again (B).
A-C is a little counter-intuitive at first, because you might seek for the "open it again" button at the top right window corner, but you actually need to click on a tab to reveal that button.
B-D is easy to learn and allows to quickly open and close the ribbon. It might feel a bit odd to have the close button above the thing you actually want to collapse.
A-B does not have that issue, but the button changes location and can thus be frustrating to users who want to toggle it quickly (or undo the action because they accidentally click on the button repeatedly).
