How to overlay when sidebar is open?

  • 0
    Good afternoon, there is a website https://crewbarber.ie/ . Clicking the "Book Now" button opens a sidebar. We need to make sure that when the sidebar is open, the body of the site gets an overlay and is darkened. When the sidebar opens, a CSS class is added to it and I decided to use Jquery, but this code did not work. I would be grateful for any help.
    <script>
    $(document).ready(function() {
    	if ( $( ".ob-widget-container" ).hasClass("slide-in")) {
            $("body").addClass("darker");
    }
    });
    </script>
    JavaScript Anonymous, Dec 7, 2020

  • 1 Answers
  • 0
    You can add your own handlers to the sidebar opening and closing buttons.

    document.addEventListener('DOMContentLoaded', () => {
    const buttonOpen = document.querySelector('.ob-widget-btn');
    const buttonClose = document.querySelector('.ob-widget-container__header__close__cross');
    buttonOpen.addEventListener('click', () => {
    document.body.classList.add('darken');
    });
    buttonClose.addEventListener('click', () => {
    document.body.classList.remove('darken');
    });
    });
    Julian Mack

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!