How to make a generic toggle function in JQuery?

Question

I have a sidemenu in HTML like this:

_Layout.cshtml

<div class="col nav-left h-100">
<p>Menu</p>
</div>

In my Site.js I have made a generic JQuery function for the toggle:

var eventHandler = {
    addToggle: function addToggle(btnElem, openEvent, closeEvent) {
        const isClosedClass = 'this-is-closed';
        btnElem.click(function () {
            if ($(this).hasClass(isClosedClass)) {
                openEvent();
            } else {
                closeEvent();
            }
        });
    }
};

In my _Layout.cshtml I call this function like this:

 <script>
        eventHandler.addToggle($(".btn-toggle-something"),
            function () {
                // Slide down
            },
            function () {
                // Slide up
            });

 </script>

Now I getting stuck how to write the logic for the actual toggle on a div.

How can I toggle my side menu with a generic function?

Sources I looked:

https://api.jquery.com/toggle/

How to toggle (hide / show) sidebar div using jQuery

Yes that is what I am looking! Can you post your code in the answers so I can accept it? — Fearcoder
– Fearcoder, Commented Jul 18, 2019 at 10:14

user7290573 · Accepted Answer · 2019-07-18 10:18:50Z

.slideUp() and .slideDown() in combination with .toggleClass() will work - please see below:

var eventHandler = {
    addToggle: function addToggle(btnElem, openEvent, closeEvent) {
        const isClosedClass = 'this-is-closed';
        btnElem.click(function () {
            if ($(this).hasClass(isClosedClass)) {
                openEvent();
            } else {
                closeEvent();
            }

            // Toggle `isClosedClass` for next time this is clicked.
            btnElem.toggleClass(isClosedClass);
        });
    }
};

// Bind slideDown/slideUp.
var leftNav = $('.nav-left');

eventHandler.addToggle($('.btn-toggle-something'),
    function () {
        leftNav.slideDown();
    },
    function () {
        leftNav.slideUp();
    }
);

body {
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
}

.nav-left {
  background-color: lightskyblue;
  width: 200px;
  height: 400px;
}

.btn-toggle-something {
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 250px;
  height: 50px;
  width: 50px;
  background-color: salmon;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col nav-left h-100">
  <p>Menu</p>
</div>

<div class="btn-toggle-something">Toggle</div>

Collectives™ on Stack Overflow

How to make a generic toggle function in JQuery?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related