hide content when div clicked

Question

I'm creating a new site and I want to add a button that hides certain sections of the site when clicked. Right now I'm using the code below and it works fine but I just need it to do one more thing. How can I make it add a new class to the button when it's clicked so I can reposition the clicked button using css? Thanks in advance!

Here is the js code i'm using right now.

$(".hide-content").click(function() {
    $(".site-header, #page-entry, .site-footer").toggle(500);
    });

$(".hide-content").toggle(function() {
      $(this).text("Hide");
    }, function() {
      $(this).text("Show");
    });
});

Answer 1

Try .addClass()

$(".hide-content").click(function() {
    $(".site-header, #page-entry, .site-footer").toggle(500);
    $(this).addClass('ClassName'); //add class
});

---

Also Read Class Attribute

.toggleClass()

.removeClass()

this

---

.toggle() has been deprecated and removed

Answer 2

$(".hide-content").click(function () {
    $(".hide-content").addClass("new-class")
    $(".site-header, #page-entry, .site-footer").toggle(500);
});

Answer 3

$("body").on('click', '.hide-content', function (e) {
    var $el = $(this);
    $(".site-header, #page-entry, .site-footer").toggle(500, function () { //when complete..
        $el.addClass('myclass');
    });
});

Answer 4

Use the addClass function

$(".hide-content").click(function() {
  $(this).addClass("class-name")
  $(".site-header, #page-entry, .site-footer").toggle(500);
});

Or you could do css directly on jquery using the .css function

$(".hide-content").click(function() {
  $(this).css("position", "absolute"); //note that params in css function is only an example, do what you need..
  $(".site-header, #page-entry, .site-footer").toggle(500);
});