javascripthtmltogglehideshow

Show/hide Javascript Toggle in the same page problem. Multiple hidden texts shows up in the same time. Without JQuery

This script works very well. But I want to show and hide different texts with different expand/hide links in the same multiple tables of the same page. Without JQuery this simple script is preferred. Thank you for your time and interest.

view code

Solution

  • Look into this code i tried this without jQuery. if you will include jquery it will be too easy task.

    function toggleme(elementId) {
            var ele = document.getElementById(elementId);

            if (ele.style.display === "block" || ele.style.display === "") {
                ele.style.display = "none";
            } else {
                ele.style.display = "block";
            }
        }
    body {
    font-family: Arial, sans-serif;
}

a {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
    margin-right: 10px;
}

.hideme {
    padding: 10px;
    border: 1px solid #ccc;
    margin-top: 10px;
}
    <a onclick="toggleme('toggleText1');">Show</a>
<div id="toggleText1" class="hideme" style="display: none">
    <h1>Hello world 1</h1>
</div>

<a onclick="toggleme('toggleText2');">Show</a>
<div id="toggleText2" class="hideme" style="display: none">
    <h1>Hello world 2</h1>
</div>