Multiple Hide/Show CSS/HTML/JS Code

[auscrisos]

Hello, I’d like to inquire how to create multiple hidden/show more coding for my WordPress site. I am having issues with the following code below, the source is getting mixed up. How do I differentiate the two? Please help, thank you!

–Script1–

<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 = "Click here for complete details.";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide details.";
}
} 
</script>

<a id="displayText" href="javascript:toggle();">Click here for complete details.</a>
<div id="toggleText" style="display: none">Details</div>
</span>

–Script2–

<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 = "Click here for more information.";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide Disclaimer.";
}
} 
</script>

<a id="displayText" href="javascript:toggle();">Click here for more information.</a>
<div id="toggleText" style="display: none">Information</div>
</span>

[chrisofarabia]

@auscrisos

I am having issues with the following code below, the source is getting mixed up.

Can you explain what you mean in a little more detail?

[chrisofarabia]

Had another read through the code and I think I see what’s going on, assuming that the two <a> and <div> tags are in the same page. They both have the same id attribute. ID’s should be unique on a page. If you can give them all unique ID’s, I think you’ll get better results.

[auscrisos]

Understood. So the ID for each is “toggleText” & “displayText”? Which means I would have to alter them to:

"toggleText-1"
"displayText-1"

"toggleText-2"
"displayText-2"

For each respective script?

[chrisofarabia]

That should work. It wouldn’t be particularly DRY (don’t repeat yourself), as the same script is being repeated, with just a change of target id, but it should at least get you functional.

[Gothic_Sanctuary]

I made this, and when I click the first opener, the second still opens. What the heck am I doing wrong … -.-

here is the altered code:

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

<a id="displayText-1" href="javascript:toggle();">Anzeigen</a>
<div id="toggleText-1" style="display: none">Details</div>
</span><br><br><br><br><br><br>

<script language="javascript"> 
function toggle() {
var ele = document.getElementById("toggleText-2");
var text = document.getElementById("displayText-2");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Click here for more information.";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide Disclaimer.";
}
} 
</script>

<a id="displayText-2" href="javascript:toggle();">Click here for more information.</a>
<div id="toggleText-2" style="display: none">Information</div>
</span>

[felgall]

@Gothic_Sanctuary

What the heck am I doing wrong

you have multiple functions all called toggle() so each will overwrite the prior versions.

Never put JavaScript in the HTML - especially not in a href - JavaScript should all go at the bottom of the web page.

You can do what you are after using just HTML and CSS without JavaScript.

[Gothic_Sanctuary]

I found this in the morning, and it seem to work fine - I’m glad like a goldfish.

<script language="javascript">
function toggle1() {
    var ele = document.getElementById("toggleText1");
    var text = document.getElementById("displayText1");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = '<font color="0000ff"><u>Anzeigen</u></font>';
    }
    else {
        ele.style.display = "block";
        text.innerHTML = '<font color="0000ff"><u>Verbergen</u></font>';
    }
} 
</script> <a href="javascript:toggle1();" id="displayText1"><font color="0000ff"><u>Anzeigen</u></font></a>
<div style="display: none" id="toggleText1">Aufgeklappter Text</div>
<br />
<br />
<br />
<script language="javascript"> 
function toggle2() {
    var ele = document.getElementById("toggleText2");
    var text = document.getElementById("displayText2");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = '<font color="0000ff"><u>Anzeigen</u></font>';
    }
    else {
        ele.style.display = "block";
        text.innerHTML = '<font color="0000ff"><u>Verbergen</u></font>';
    }
} 
</script> <a href="javascript:toggle2();" id="displayText2"><font color="0000ff"><u>Anzeigen</u></font></a>
<div style="display: none" id="toggleText2">Aufgeklappter Text</div>

[felgall]

@Gothic_Sanctuary

I found this in the morning, and it seem to work fine

Are you aware that it is not 1997 any more? Most of that code became non-standard in 1997.

[m3g4p0p]

Hey @Gothic_Sanctuary, you have two functions there doing the basically same thing – this is terribly inefficient and hard to maintain. You’d only need one if you separated your JS and HTML as @felgall suggested, like

CSS

#toggleText1,
#toggleText2 {
  display: none;
}

#displayText1,
#displayText2 {
  color: blue;
  text-decoration: underline;
}

HTML

<a href="#" id="displayText1">Anzeigen</a>
<div id="toggleText1">Aufgeklappter Text</div>
<br>
<a href="#" id="displayText2">Anzeigen</a>
<div id="toggleText2">Aufgeklappter Text</div>

JS

function toggle() {
    var ele = this.nextElementSibling;

    if (ele.style.display == "block") {
        ele.style.display = "none";
        this.textContent = 'Anzeigen';
    } else {
        ele.style.display = "block";
        this.textContent = 'Verbergen';
    }
}

document.getElementById('displayText1').addEventListener('click', toggle);
document.getElementById('displayText2').addEventListener('click', toggle);

This makes your code much more reusable. (Technically, you could also call that function inline and pass the relevant IDs as parameters, but there are other concerns as noted above.)

And then you could indeed do this entirely w/o JS. :-) Like

CSS

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] ~ div {
  display: none;
}

[type="checkbox"]:checked ~ div {
  display: block;
}

[type="checkbox"] + label {
  cursor: pointer;
  color: #00F;
  text-decoration: underline;
}

[type="checkbox"] + label:before {
  content: attr(data-show);
}

[type="checkbox"]:checked + label:before {
  content: attr(data-hide);
}

HTML

<div class="container">
  <input type="checkbox"id="displayText1">
  <label 
    for="displayText1" 
    data-show="Anzeigen"
    data-hide="Verbergen"></label>
  <div id="toggleText1">Aufgeklappter Text</div>
</div>

<div class="container">
  <input type="checkbox"id="displayText2">
  <label 
    for="displayText2" 
    data-show="Anzeigen"
    data-hide="Verbergen"></label>
  <div id="toggleText2">Aufgeklappter Text</div>
</div>

That’s commonly called the “checkbox hack”. – Here’s a fiddle.