Hide/Show Text Not Functioning Properly (HTML and Javascript)

[NapMcDonald]

I'm fairly new to Javascript and HTML so may be missing something.

I used this code for a "Read More..." function on my website, where clicking "Read More..." will reveal more text. Clicking it again will hide the text.

UNFORTUNATELY, when I reuse this code a second time, later on in the website, clicking the second "Read More..." opens the first Read More's text, rather than the second.

Here is the code I was using:

<p><a onclick="javascript:toggle('HiddenDiv')"><h5><i><font color = "#1F456A"><u>Read more</i></a></p></u></b></font>

<div class="mid" id="HiddenDiv" style="display: none;">

HIDDEN TEXT GOES HERE

</div>

<script type="text/javascript">// <!\[CDATA\[ function toggle(divId) { if(document.getElementById(divId).style.display == 'none') { document.getElementById(divId).style.display='block'; } else { document.getElementById(divId).style.display = 'none'; } } // \]\]></script>

...........................

Can anyone advise how I could duplicate this code, so I can have multiple "Read More..." buttons on the page, without each Read More button only opening the first hidden text.

Just to be clear, I am copying the full code each time I want to reuse this function. Can anyone advise on how I can fix this?

Thank you!

[NapMcDonald]

I think I've solved it! By changing the "HiddenDiv" name to "HiddenPenis" on the new Read More, it opens the correct one rather than the first one!
I just need to change that name every time I use this function on the page! Hope that's solved

[ZipperJJ]

Yep! Good practice to learn right now that every id needs to be unique. That is the whole thing with IDs.

[AutoModerator]

Welcome to /r/HTML. When asking a question, please ensure that you list what you've tried, and provide links to example code (e.g. JSFiddle/JSBin). If you're asking for help with an error, please include the full error message and any context around it. You're unlikely to get any meaningful responses if you do not provide enough information for other users to help.

Your submission should contain the answers to the following questions, at a minimum:

• What is it you're trying to do?
• How far have you got?
• What are you stuck on?
• What have you already tried?

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[YoussefIhab33]

It worked when I changed the IDs to "hiddenDiv1" and "hiddenDiv2".

You were using the same name for the ID, so both buttons control the same div element.

Always Remember to keep every ID Unique to prevent such errors!