Search code examples
javascriptdropdownbox

js toggle and button

I made this JS spoiler and it works fine if I have only one drop down box, but if I try to add more than one spoiler in the page, than when I click on the second spoiler link it opens the first spoiler. Than I changed the id "hidden" of second link to "hidden2" and it worked as I wanted it to work. The problem is with the linked image which I use as a spoiler opening and closing button. (When click on the image I want it to change to other image. ) So, when I click on one button to open spoiler the image changes on both first spoiler button and second.... Here is DEMO to understand what I mean.. Click on the second button.....

function toggle(element) {
    if (document.getElementById(element).style.display == "none") {
    document.getElementById(element).style.display = "";
    document.getElementById("drop").src="/drop_up.png";

    } else {
    document.getElementById(element).style.display = "none";
    document.getElementById("drop").src="/drop_down.png";

    }
    } 


    <a href="javascript:toggle('hidden')"><img  id="drop" width="25px" src="/drop_down.png" /></a>
    <div id="hidden" style="display:none;">
    Box content
    </div>
Solution

  • This is happening because this:

    document.getElementById("drop").src

    Is ambiguous. You shouldn't have two elements with identical IDs on a page - use a class if there are multiple instances of the same name. Javascript is just searching until it finds the first instance of the 'drop' id, and stopping.