How to toggle tabs to show or hide on button click in code mirror

Question

I'm making a python editor for a site and I'm using Code Mirror javascript library for this purpose. I'm having a button named toggle invisibles. If user presses the button, the spaces and the end of the line markers will be displayed. I wanted to display tabs also. Since code mirror shows only spaces and end of the line, I have added a manual way also to show tabs.

In code mirror, the tabs have html <span class="cm-tab" cm-text=" "></span>. I have set a background image to the .cm-tab class in css so that tabs will be visible with those image.

Since, I want to toggle the visibility of the span element, initially, I have set it to visibility: hidden. And in javascript, when user click of toggle invisibles button, i will set the visibility to visible.

Here is the code:

CSS:

.cm-tab{
    background: url("url");
    visibility: hidden;
}

Javascript:

var showi = true;
$(".textarea-editor").each(function(index){
    var editor  = CodeMirror.fromTextArea($(this)[0],{
        mode: {name: "python", version: 3, singleLineStringErrors: true, globalVars: true}, 
        lineNumbers: true, 
        lineWrapping: true,
        indentUnit: 4,
        showInvisibles: false,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        autoCloseBrackets: true,
        maxInvisibles: 16,
        matchBrackets: true,
        indentWithTabs: true,
    });
    $("#toggleInvisible").click(function(){
        editor.setOption('showInvisibles', showi);
        var tab-visibility = showi?"visible:"hidden";
        var style = $('<style>.cm-tab {visibility:'+tab-visibility+'} 
        </style>');
        $(".cm-tab".append(style);
        showi=showi?false:true;
    });
    editor.on('change', function(e){ var txt = editor.getValue();});
});

The problem is that, when i click the button, the tabs are showing with the background image. but when i click enter to go to next line, the tabs are getting invisible. I have append the style attribute to the newly created tabs also in the click function based on this post

Add CSS rule via jQuery for future created elements

Answer 1

I have created two style tags and provided the .cm-tab class. Here is my code:

<style>.cm-tab{background:url();}</style>
<style id="tab-style">.cm-tab{visibility: hidden;}</style>

and then change the html of #tab-style in javascript.

$("#tab-style").html(".cm-tab{visibility:visible}");