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.