How to include padding as part of a div that can be clicked to trigger event

Question

Is there a way to make a JQuery .click function work for when someone clicks on the padding on a div? Also, is there a way to make the cursor: pointer CSS styling work for when one hovers over the padding of a div as well?

Here is the div:

<div class="fa fa-angle-double-right fa-lg right-sidebar-show close-button"></div>

I styled the CSS for the div like so:

.right-sidebar-show.close-button {
  float: left;
  cursor: pointer;
  position: absolute;
  right: 155px;
  top: 0px;
  z-index: 2;
  padding: 15px 20px 12px 20px;
}

And here is the Javascript event that triggers when the user clicks the .right-sidebar-show class:

$(".right-sidebar-show").click(function(e) {
    if(Cookies.get('helpOpen') == "true") {
      close();
    }

    else if (Cookies.get('helpOpen') == "false") {
      open();
    } 
  });

Answer 1

If you were to wrap the div in any sort of container element and then attach the on-click / hover events to that container, then that would result in events being triggered when the user clicks anywhere on the div (including the padding.) This should extend to cursor styling as well

If you're looking to target the padding exclusively then check out this answer here: https://stackoverflow.com/a/7462847/6477119

Answer 2

Everything you're asking for appears to work by default in jsfiddle. See this example.

By default, padding should be included in an element's click event. This is due to the way the padding is calculated in the W3C Box Model. It should be noted however, that margins will not be caculated in the event handler. I've included a border: 1px solid #ccc; around your menu button to show the area (including the padding) where the click event will apply.

As for the cursor property, it appears to work fine in Chrome in jsfiddle. I'm not sure why that would be causing a problem on your end.

DEMO:

On to the demo. I've created a working, though not well styled, demo to demonstrate a few key points.

HTML:

<div class="fa fa-angle-double-right fa-lg right-sidebar-show close-button"></div>
<div id="sidebar">
    <h2>This is a sidebar</h2>
</div>

CSS:

.right-sidebar-show.close-button {
  float: left;
  cursor: pointer;
  position: absolute;
  right: 155px;
  top: 0px;
  z-index: 2;
  padding: 15px 20px 12px 20px;
  border: 1px solid #ccc;
}
#sidebar {
  background: #aaa;
  position: fixed;
  width: 300px;
  top: 0;
  bottom: 0;
  left: -300px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
#sidebar.open {
  left: 0;
}

JavaScript:

$(function () {
    $(".right-sidebar-show").click(function(e) {
        if($('#sidebar').hasClass('open')) {
            $('#sidebar').removeClass('open');
        } else {
            $('#sidebar').addClass('open');
        }
    });
});

Make sure your event handler is wrapped in a $(document).ready or shorthand $(function () handler if not place right before the </body> tag.

You can simply your code and remove the need for an unnecessary cookie with a little refactoring. Allow your #sidebar to be opened and closed with a CSS3 transition by applying a class. Checking for this class will allow you to determine if the sidebar is opened or closed without the need for a cookie.