Why do these divs remain visible?

Head out to http://brucegust.com/portfolio/verizon/index_static.php#. Click on the (6) to the right of the July month listed along the right hand side. You'll see a list of states appear that look like this:

Florida
Louisiana
Mississippi
Tennessee

The idea is that when you click on one of those states, all of the states' entries within the calendar remain visible while the other states are hidden. It works! Except for the "fried wire" and "big waves" entries. Both of these are "Florida" ids. When I look at my Javascript code, it appears sound and the Florida entry on the fourth (another Florida disaster) goes back and forth between hidden and visible just as it should. But I'm missing something with the Florida entries on the 7th and the 9th. Why will they not hide on command?

What do you think?
Bruce GustPHP DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Russ SuterSenior Software DeveloperCommented:
It's because you have multiple divs with id="Florida". You can't have multiple elements on a page with the same id. Instead, you can use class="Florida" and select all your elements that way. If you're using jQuery it might look like this:

$(".Florida").each(function ()
{
    $(this).hide();
});

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
hieloCommented:
An element's id attribute must be unique.  So only one of them on the entire page may have id="Florida".  the same goes for the others.  By contrast, elements may "share" the same "class" values.  So, in your case, look for all your:
<div id="Florida">...</div>
and change them to:
<div class="Florida">...</div>

Then in your js you need:
function Florida()
{
  $(".Tennessee, .Louisiana, .Mississippi").hide();
  $(".Florida").show();
return false;//don't forget this.
}
function Louisiana()
{
  $(".Tennessee, .Florida, .Mississippi").hide();
  $(".Louisiana").show();
return false;
}
function Mississippi()
{
  $(".Tennessee, .Florida, .Louisiana").hide();
  $(".Mississippi").show();
return false;
}
function Tennessee()
{
  $(".Florida, .Louisiana, .Mississippi").hide();
  $(".Tennessee").show();
return false;
}

Open in new window

Bruce GustPHP DeveloperAuthor Commented:
And that, Russ, is why you get paid the large dollar amounts!

Thank you!
Bruce GustPHP DeveloperAuthor Commented:
Thanks, hielo as well!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.