javascript - How to hide text/div and replace it with asterisks?

Question

I need some help.. the idea behind this is like a simple toggle button that can hide the object and replacing the empty area with ****.

I was thinking it was more like in a Password form input where you can hide password by clicking the Eye icon. However, I needed something that are not required input form, something that is just simple DIV

function toggler(divId) {
    $("#" + divId).toggle();
    .css('content', 'sadas');
}

.hidden {
     display:none;
}

<a href="#" onclick="toggler('myContent');">this is a test</a>
<div id="myContent" class='hidden'>
  <div>this is a test #1 </div>
</div>

question from:https://stackoverflow.com/questions/66054137/how-to-hide-text-div-and-replace-it-with-asterisks

Answer 1

I have written a fiddle. There are some points that can be better managed. But I think you are looking for something like that.

The idea is to add another div with the **** placeholder and use toggleClass() function of jQuery.

$("#" + divId).toggleClass('hidden');
$("#myPlaceholder").toggleClass('hidden');

https://jsfiddle.net/qze8fydv/