Editing string on mouse click (show/hide part)

I am having problem with editing string on mouse click.

I have a string of text like this:

id1=&id2=&id3=&id4=&amp


And now I need to show/hide part of string by clicking on a links. I would like to hide/show each id's (i.e. id1=&)


It is simple to hide whole text but how about part of it ?

You would need to wrap the parts (let's say in <span>) before you can hide them

Something like

<span id="id1">id1=&amp;</span><span id="id2">id2=&amp;</span><span id="id3">id3=&amp;</span><span id="id4">id4=&amp;</span>

Then you can use code like

document.getElementById('id2').style.display = 'none';

to hide a certain part

Is it possible to assign each id as var? i.e.

var id1 = id1=&amp;
var id2 = id2=&amp;
var id3 = id3=&amp;
var id4 = id4=&amp;


And then somehow show/hide each var ?

Is it possible to assign each id as var? i.e.

var id1 = id1=&amp;
var id2 = id2=&amp;
var id3 = id3=&amp;
var id4 = id4=&amp;


And then somehow show/hide each var ?

No, that is not possible. Do what devnull69 has suggested.

The problem is that I need to use string combined of all those id's in a link parameter so the whole link will look like:


src='/images/engine_components/obd.svg?id1=&amp;id2=&amp;id3=&amp;'


so it is not ideal to have <span> tags inside :)

You can still get the text only content using .innerText() ... it will automatically crop the span elements