Clash Royale CLAN TAG

change the text of show/hide and initially show

I have this code which works good: and i do not want to use jquery to it, because jquery is kind of overkill here for this small function

function showHide(targetName) {
if( document.getElementById ) { // NS6+
target = document.getElementById(targetName);
} else if( document.all ) { // IE4+
target = document.all[targetName];
}

if( target ) {
if( target.style.display == "none" ) {
target.style.display = "inline";

} else {
target.style.display = "none";
}
}
}

<a href="javascript:showHide('stackbox')">Stack Trace (click to expand)</a>


i want to change its behaviour to initially as show and label to be shown as :

<a href="javascript:showHide('stackbox')">Stack Trace (click to collapse)</a>


2 Answers
2

You can change the textContent of the link when it is clicked based on whether of not #stackbox is hidden.

textContent

#stackbox

<a href="javascript:showHide('stackbox')" id="link">Stack Trace (click to collapse)</a>
<p/>
<span id="stackbox">Stack trace...</span>
<script>
function showHide(targetName) {
var elem = document.getElementById("link");
if( document.getElementById ) { // NS6+
target = document.getElementById(targetName);
} else if( document.all ) { // IE4+
target = document.all[targetName];
}

if( target ) {
if( target.style.display == "none" ) {
target.style.display = "inline";
elem.textContent = "Stack Trace (click to collapse)"

} else {
target.style.display = "none";
elem.textContent = "Stack Trace (click to expand)";
}
}
}
</script>

use "target.innerText" as bellow:

if( target ) {
if( target.style.display == "none" ) {
target.style.display = "inline";
target.innerText = "Stack Trace (click to collapse)";
} else {
target.style.display = "none";
target.innerText = "Stack Trace (click to expand)";
}
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.