Toggle Leaflet sidebar V2

Question

so im really enjoying using this sidebar but battling to either toggle the sidebar or at least read the sidebar status so can .open() or .close() accordingly. Version 1 allowed siderbar.toggle(); - https://github.com/Turbo87/leaflet-sidebar

Dont seem to be able to find it on version 2 - https://github.com/Turbo87/sidebar-v2

score 2 · Accepted Answer · edited May 23 '17 at 12:31

2

The plugin adds the collapsed class to the sidebar when it is collapsed, so you can use that to check its status. Borrowing a function from this answer to check whether an element has a particular class (and assuming that your sidebar div has the id sidebar), you can toggle it like so:

var sidebar = L.control.sidebar('sidebar').addTo(map);
var sidebarDiv = document.getElementById('sidebar');

toggleSidebar = function() {
  if (hasClass(sidebarDiv,'collapsed')) {
    sidebar.open();
  } else {
    sidebar.close();
  }
}

function hasClass(element, cls) {
  return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

Example fiddle:

http://fiddle.jshell.net/nathansnider/gpqbvs50/

edited May 23 '17 at 12:31

Community

1
1

answered Apr 27 '16 at 23:07

nathansnider

2,773
1
14
17

This is perfect! Thanks so so much Nathan. – David Apr 28 '16 at 10:41
Using the above code, how would you add another sidebar? – Beatdown May 15 '22 at 00:54

Toggle Leaflet sidebar V2

1 Answers1