How to align(indent) after hiding an element

Question

I have 3 link buttons, 2 of which are hidden. And when clicked on another button, I want to hide the one that is visible and unhide the ones that are hidden.

However, when the visible one goes invisible, the newly visible ones are staying in their position. How can I align(indent?) to the right to take the space of the one that's disappeared?

My links are something like the following:

.title_tools#area1{:style => "visibility: visible;"}
    = link_to_inline(:create_ins, new_ins_path, :text => t("Create new instance"))#link1

.title_tools#area2{:style => "visibility: hidden;"}
    = link_to "Sync", "cat/sync", :remote=>true#link2
    = link_to "Open", "cat/open", :remote=>true#link3

And I hide/unhide by "page << "document.getElementById('area2').style.visibility='visible';" in my .js files.

So in the first place it is:

_______  _______  {link1}

After clicking the button, it is:

{link2}  {link3}  _______

But it should be:

_______  {link2}  {link3}

How can I achieve that? Thanks

Answer 1

try

.title_tools#area2{:style => "visibility: hidden;position:fixed;left:30px;"}

Change the left value to How much ever u need.

Answer 2

If you use the visibility property, your items are displayed but not visible. All the items with a display property that isn't none are in the flow and take the required space.

Two solutions:

1. Try to add a display: none when you hide link1.

2. Or, show them all (visibility: visible), find the CSS tricks to correctly place them (link1 need to overlay link3) and put visibilities back.