How can I toggle two elements without removing in javascript

Question

I have this html

<div>
<span data-disabled class="myclass"> like </span>
<span class="myclass"> unlike </span>
</div>

scss is like this

myclass{
     visibility: visible;
        cursor: pointer;

        &[data-disabled] {
            visibility: hidden;
        }
}

and based on click I am doing this

        this.select('like').attr('data-disabled', true);
        this.select('unlike').removeAttr('data-disabled');

It is working fine but my like and unlike are shown next to each other and they hide and become visible at their original position.

Is there any way to have same position and when I hide and unhide then they overwrite each other.

Can you make a fiddle for us? Would like to see this in action. — Marcus Rommel, Sep 23 '14 at 04:34

score 1 · Accepted Answer · edited May 23 '17 at 12:03

1

The problem is with the visibilty property you are using. You have to use display:none so that the item will not consume the space when hidden.

instead of

visibility: hidden;

use

display: none;

You can read more about it here.

edited May 23 '17 at 12:03

Community

1
1

answered Sep 23 '14 at 04:37

Mithun Satheesh

27,240
14
77
101

score 0 · Answer 2 · answered Sep 23 '14 at 04:37

Try JQuery Toggle function to achieve this task:

 $(function(){
    $(".myclass").click(function () {
        $(".myclass").toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <span class="myclass"> like </span>
    <span class="myclass" style="display:none"> unlike </span>
    </div>

How can I toggle two elements without removing in javascript

2 Answers2