Question

I am trying to change an element’s ID by clicking on the element using Jquery. The operation works on the first click, but not any clicks afterward.

$(document).ready(function(){
$("#chatframebuttonhidden").click(function() {
var $t = $(this);
            $t.attr({
                    id : $t.attr('id2')
                });
            });;
$("#chatframebuttonshown").click(function() {
var $t = $(this);
            $t.attr({
                    id : $t.attr('id1')
                });
            });;
});


<div id="chatframebuttonhidden" id2="chatframebuttonshown" id1="chatframebuttonhidden"></div>

The term “hidden” doesn’t mean the div is out of view, it just means it’s much smaller and less noticeable.

The ultimate goal is to make a button that hides/unhides a large fixed position divider on the bottom of the screen. I think that changing the ID so it references a new stylesheet is the best method, but if you guys know a better method I’m all ears.

Answer 1

Use a class instead and toggle it on and off. IDs aren’t really meant to be changed like that, classes are.

Also no need to swap out the entire stylesheet to hide some elements. Use a parent container and hide that.