Changing font size and modifying Javascript Show/Hide Toggle

Question

I'm a total beginner in Javascript, and I came across this script for a show/hide toggle:

<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
} 
</script>

I would like to change the font size of the "show" and "hide" in this code. Seems like a really easy task, but I've looked everywhere and can't find an answer.

Also another question, how could I modify the code so that I don't have to copy and paste the whole code and changing toggle() to toggle2() , toggle3() for each separate show/hide toggle on the same page?

Thank you very much!

Answer 1

You can use element.style.fontSize to dynamically set the font size of an element.

 function toggle() { var ele = document.getElementById("toggleText"); var text = document.getElementById("displayText"); if(ele.style.display == "block") { ele.style.display = "none"; text.style.fontSize = "50px"; text.innerHTML = "show"; } else { ele.style.display = "block"; text.style.fontSize = "30px"; text.innerHTML = "hide"; } } document.getElementById("displayText").addEventListener('click', function(){ toggle(); }); 

 #toggleText{ display:none; } #displayText{ color: #00af00; background: #d9d9d9; padding: 4px 20px; display: inline-block; text-decoration:none; } 

 <p id="displayText">show</p> <div id="toggleText"> Hidden or naw? </div> 

Answer 2

You don't have to create toggle2, toggle3, This will make your code redundant. Instead, add a parameter on your toggle to pass the toggleText.

<script language="javascript">
function toggle(toggleText) {
var ele = document.getElementById(toggleText);
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
} 
</script>

For the font, you can have this on your css.

<style>
#displayText {
    font: bold 12px Georgia, serif;
}
</style>