Change labels in slicknav when open/closed

Question

I'm trying to change the labels in Slicknav for when the Slicknav menu is opened and closed.

In the jsfiddle, here. I've used label closed for the default state, and for the open state another piece of text I would like another piece of text.

Like this for the normal state:

$('#menu').slicknav({
    duplicate: false,
    label: 'label closed'
});

I've tried using basic if this then that and I feel like I'm just messing up this very simple piece of javascript.

Any help would be greatly appreciated!

Answer 1

After having a short look on the docs
Something like this should do the trick.

var $label;
$('#menu').slicknav({
    duplicate: false,
    label: 'label closed',
    init: function() {
        $label = $(".slicknav_menutxt");
    },
    open: function() {
        $label.text("label open");
    },
    close: function() {
        $label.text("label closed");
    } 
});

Also the link to jsfiddle

Answer 2

You could just change the text directly as it's contained in a span with the class slicknav_menutxt - Fiddle

$('#open').click(function (event) {
  event.preventDefault();
  $('#menu').slicknav('open');
  $(".slicknav_menutxt").text("label open");

});

$('#close').click(function (event) {
  event.preventDefault();
  $('#menu').slicknav('close');
  $(".slicknav_menutxt").text("label closed");

});

$('#toggle').click(function (event) {
  event.preventDefault();
  if ($(".slicknav_menutxt").text().indexOf("open") >= 0) {
    $(".slicknav_menutxt").text("label closed");
   } else {
    $(".slicknav_menutxt").text("label open");
  }
  $('#menu').slicknav('toggle');
});