4

I using leaflet-sidebar-v2 and I'm wondering how can I change the attribute of a tab based on their id:

  ctlSidebar = L.control.sidebar({container:'sidebar_div'}).addTo(mymap);

  ctlSidebar.addPanel({
    id:   'info',
    tab:  '<i class="fa fa-plus"></i>', // Font Awesome icon
    title: 'info',
    pane: 'some info'
  });


sidebar.on('opening', function() {
    //Change the 'tab' of ID == 'info' to '<i class="fa fa-minus"></i>';
})

sidebar.on('closing', function() {
    //Change the 'tab' of ID == 'info' to '<i class="fa fa-plus"></i>';
})
Matt_Geo
  • 1,050
  • 1
  • 10
  • 26

1 Answers1

5

When defining the tab button, I'd assign an ID to it. In the event handlers, change its classes:

// note the id
ctlSidebar.addPanel({
  tab:  '<i id="my-dynamic-tab" class="fa fa-plus"></i>'
  ...
})

ctlSidebar.on('opening', function() {
  document.getElementById('my-dynamic-tab').className = 'fa fa-minus'
})

ctlSidebar.on('closing', function() {
  document.getElementById('my-dynamic-tab').className = 'fa fa-plus'
})
Norwin
  • 521
  • 2
  • 13