此JavaScript可以处理WordPress页面中的多个显示/隐藏吗？

Question

There are other questions about this with great Answers (for example storeitem crops up) but unfortunately I'm not familiar enough yet to do more than tweak the code we've got. I've asked in other forums without success.

We have a WordPress (hosted) site and a Page (not Post) needing four plain copy text paragraphs that simply show/hide some additional plain copy text on a 'More...' click.

Visually on the Page there's four paragraphs of plain copy test, each followed by 'More...' - nothing fancier than that. There are no panels, borders, graphical elements etc.

The idea is that a user can expand one, some or all of the paras.

The code we have works fine for one instance (one 'More...') if we start the Page (within WP editor) with this JavaScript:

<script type="text/javascript" language="javascript">// <![CDATA[
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>

Then wrap the to-be-revealed content:

<div id="toggleText" style="display: none;">to-be-revealed content</div>

Then make the click:

<a id="displayText" href="javascript:toggle();">More...</a>

That works perfectly. The to-be-revealed content just snaps up and content beneath it follows below.

BUT taking the advice we have so far on multiple instances in one Page doesn't work.

The advice is to repeat the JavaScript and use different IDs for toggleText and displayText in each repetition.

But doing that, the last copy of the JavaScript in the Page is always the one that triggers, showing to-be-revealed content in the final (fourth) para whichever 'More...' is clicked. (I think I can see why - it's the 'latest' toggle function so it's the one that applies.)

This is what we have so far for multiple instances (and the person who advised us isn't about...) - it's just four copies of the JS with toggleText and displayText numbered:

<script type="text/javascript" language="javascript">// <![CDATA[
function toggle() { var ele = document.getElementById("toggleText1"); var text =      document.getElementById("displayText1"); if(ele.style.display == "block") { ele.style.display =    "none"; text.innerHTML = "More ..."; } else { ele.style.display = "block"; text.innerHTML = "... less"; } }
// ]]></script>

<script type="text/javascript" language="javascript">// <![CDATA[
function toggle() { var ele = document.getElementById("toggleText2"); var text =  document.getElementById("displayText2"); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "More ..."; } else { ele.style.display = "block"; text.innerHTML = "... less"; } }
// ]]></script>

<script type="text/javascript" language="javascript">// <![CDATA[
function toggle() { var ele = document.getElementById("toggleText3"); var text =  document.getElementById("displayText3"); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "More ..."; } else { ele.style.display = "block"; text.innerHTML = "... less"; } }
// ]]></script>

<script type="text/javascript" language="javascript">// <![CDATA[
function toggle() { var ele = document.getElementById("toggleText4"); var text = document.getElementById("displayText4"); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "More ..."; } else { ele.style.display = "block"; text.innerHTML = "... less"; } }
// ]]></script>

Then the wrap and click are each numbered for each instance too, eg:

<a id="displayText1" href="javascript:toggle();"><span style="color: #339966;">Show more ...</span></a>
<div id="toggleText1" style="display: none;">
Content
</div>

QUESTION: can this way of using JavaScript ever work for multiple instances? If so please show!

It looks as though there needs to be some sort of ID for the toggle function itself to tie it to one ('numbered') instance. I can see how some of the other answers point to relevant solutions but unfortunately I don't know enough yet to make proper sense of them (touching jQuery would be a first for me and hoping to have this working on Monday).

Thanks, C

Answer 1

You can try

<a id="displayText" href="javascript:toggle(this);">More...</a>

then in toggle function

function toggle(element) {
    // element here is the link you clicked try to find the hidden text relative to this link. using Dom navigation
}

Answer 2

I don't see any need to ever create multiple functions that do the same thing. In general you should pass parameters in the function call. eg

<a id="displayText1" href="javascript:toggle(1);">...</a>
<a id="displayText2" href="javascript:toggle(2);">...</a>
<a id="displayText3" href="javascript:toggle(3);">...</a>
<a id="displayText4" href="javascript:toggle(4);">...</a>

and in the javascript:

function toggle(num) {
    var ele = document.getElementById("toggleText" + num);
    var text = document.getElementById("displayText" + num);
    ....
}

Works like a charm. Hope this helps.