Click here to Skip to main content
15,887,214 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hey guys.. I'm very new to this so please bare with my poor lingo and code... i need to know how i can have two buttons on a page each with spearate drop down texts, at the moment when i click either buttons i get the same answer drop down, usually the second script. I think I'm missing something in the script code or how I id it. But all help welcome :)

What I have tried:

<style>
} 
BUTTON.button {
display: block;
    margin-left: auto;
    margin-right: auto;
    align: centre }
#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: #65a83d;
    margin-top:20px;
}
#myDIV2 {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: #65a83d;
    margin-top:20px;
}
</style>

<body>

<br><br>
<button class="button" onclick="myFunction()">Give me a clue </button>
<div>
<div id="myDIV" class="hidden" style="display: none;">
Look at the 5's!
</div>
<br><br>
<button class="button" onclick="myFunction()">Show Answer </button>
<div>
<div id="myDIV2" class="hidden" style="display: none;">
15!
</div>

<script>
function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>
<script>
function myFunction() {
    var x = document.getElementById('myDIV2');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>
</body>
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900