如何隐藏锚标记并在同一位置显示另一个锚标记

Question

I have the following anchor attributes defined in my JSP. Once I click the 'Add All Plans To Cart', I want the 'Add All Plans to Cart' button to hide and 'Remove All Plans From Cart' to be displayed in the same place as 'Add All Plans to Cart'.

Hide and Show is working fine. But the 'Remove All Plans From Cart' is displayed on the next line . I want it to exactly replace the 'Add All Plans To Cart' button. I tried various approaches including document.getElementById and inline,inline-block ete in my Javascript file but none of them worked.

Appreciate any inputs.Thanks.

JSP

<a id="selectAll" class="primaryButton btn btn-small" style="margin-left:10px">
    Add All Plans To Cart
</a>

<a id="removeAll" style="display:none" class="primaryButton btn btn-small" style="margin-left:10px">
    Remove All Plans From Cart
</a>    

Javascript

$("#selectAll").click(function () 
{
    $("#selectAll").hide();
    $("#removeAll").show();
});

Answer 1

Bootstrap buttons should preferably be used in their own element, try to wrap them inside another element which is then hidden by your code.

<span id="selectAll" style="margin-left:10px">
  <a class="primaryButton btn btn-small">
    Add All Plans To Cart
  </a>
</span>

<span id="removeAll" style="margin-left:10px; display:none">
  <a class="primaryButton btn btn-small">
    Remove All Plans From Cart
  </a>   
</span>

Answer 2

There's little wrong in your jQuery. You are missing the ending round bracket ) and semicolon ; . So your jQuery should look something like this :

jQuery :

$("#selectAll").click(function () {
     $("#selectAll").hide();
     $("#removeAll").show();
});

Now as i've tried in the following fiddle here , the anchors are displayed in same position. So there might be something wrong with your css code.

Share the css code to get in detailed solution.

Answer 3

how about float both button, if this won't help, you should public your all code somewhere, jsfiddle for example

#selectAll, #removeAll {
    float: left;
}