Adding multiple buttons to form

Question

I'm calling on multiple buttons to show up but it seems that only one button shows up. Please tell me why. I've tried adding a in the body with a class but that seems to screw up the button that's already hidden.

This form basically shows a button when the url contains iphone

Example: http://jsfiddle.net/SDq4P/35/show/#iPhone Here's the JSFiddle: http://jsfiddle.net/SDq4P/35/

I need all three buttons to show at one time. All three buttons contain iphone but only one shows up.

<div id="linkdiv" href="phone-condition" onclick="location.href = $(this).attr('href')+'?/1234/#iPhone';return false" />
<div id="linkdiv" href="phone-condition" onclick="location.href = $(this).attr('href')+'?/1234/#iPhone';return false" /> 
<div id="linkdiv" href="phone-condition" onclick="location.href = $(this).attr('href')+'?/1234/#iPhone';return false" />

Answer 1

Try to make use of class instead of IDs. HTML ID is supposed to be unique and your sample HTML has three DIV elements with the same ID . If you are using jQuery like $('#linkDiv') and do something, only the first element is selected.

Answer 2

Use <div ...></div> instead. I don't think you can end divs using the XHTML />. If you check in Chrome Dev Tools the buttons are nested into each other.

Answer 3

It's because your css is targeting a class called "select." Just add the class to the divs and they will show up. Your id's also need to be unique. Here's a fix that should work:

<div class="select" id="linkdiv1" href="phone-condition" onclick="location.href = $(this).attr('href')+'?/1234/#iPhone';return false"></div>
<div class="select" id="linkdiv2" href="phone-condition" onclick="location.href = $(this).attr('href')+'?/1234/#iPhone';return false"></div>
<div class="select" id="linkdiv3" href="phone-condition" onclick="location.href = $(this).attr('href')+'?/1234/#iPhone';return false"></div>

see it in action: http://jsfiddle.net/mHU84/

Answer 4

Instead of:

if (...) {
   (...)
}
else if (...) {
   (...)
}

Just use:

if (...) {
   (...)
}
if (...) {
   (...)
}