1

So I would like to add functionality to my page that allows the user to toggle visibility on only the information they want, in several sets, but that are interspersed among each other. I initially tried it according to this link, like so:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
   <HEAD>
      <TITLE></TITLE>
    <link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
  function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
      item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
  }
</script>
   </HEAD>
   <BODY>
      <P><a href="javascript:unhide('iron');">Toggle Silver Veins</a> | <a href="javascript:unhide('iron');">Toggle Iron Veins</a> | <a href="javascript:unhide('gold');">Toggle Gold Veins</a> | <a href="javascript:unhide('platinum');">Toggle Platinum Veins</a></p>

    <div id="gold" class="hidden">this is a gold</div>
    <div id="iron" class="hidden"> this is an iron</div>
    <div id="gold" class="hidden">this is a gold again</div>
    <div id="platinum" class="hidden"> this is a platinum</div>
    <div id="silver" class="hidden">this is a silver</div>
   </BODY>
</HTML>

Please pardon the poor formatting, I experiment messily.

Style.css only contains

.hidden { display: none; }
.unhidden { display: block; }

That worked well enough for the ones that had only a single instance, but for the "gold," it would only toggle the first div with the id. I then tried to glean information from this post and this post, but wasn't ultimately able to figure it out to my satisfaction.

The first post would work with multiple instances of the same set, but I'm not savvy enough to make it work for several instances of several different sets without duplicating the script four times. I'd appreciate your advice, thank you!

Community
  • 1
  • 1
Katu Monsterpants
  • 21
  • 1
  • 1
  • 5

2 Answers2

0

Try this:

HTML:

<p id='nav'> <a id="show_silver">Toggle Silver Veins</a> | <a id="show_iron">Toggle Iron Veins</a> | <a id="show_gold">Toggle Gold Veins</a>
</p>

<div id="menu">
    <div id="menu_silver">Toggle Silver Veins</div>
    <div id="menu_iron">Toggle Iron Veins</div>
    <div id="menu_gold">Toggle Gold Veins</div>
</div>

JQuery:

$(document).ready(function () {
    $("#nav a").click(function () {
        var id = $(this).attr('id');
        id = id.split('_');
        $("#menu div").hide();
        $("#menu #menu_" + id[1]).toggle();
    });
});

JSFiddle Demo

UPDATE

Remove:

$("#menu div").hide();

To show multiple div's at the same time as user clicks on them.

JSFiddle Demo

P.S: In your code ID's are not unique.

imbondbaby
  • 6,351
  • 3
  • 21
  • 54
  • That's close! It loads multiple instances well, but ideally I'd like them to be able to toggle as many of the options as they'd like, instead of just one at a time. How possible is that? Thank you for your help thus far. – Katu Monsterpants Aug 26 '14 at 17:01
  • Please correct me if I'm wrong, but it seems like that doesn't allow for a toggle, only an activation? So if they wanted to toggle one of the options off, they'd have to refresh the page and start over? – Katu Monsterpants Aug 26 '14 at 17:07
  • That's perfect! Thanks so much. I really need to pick up a book or something...haha. – Katu Monsterpants Aug 26 '14 at 17:13
0

HTML IDs must be unique. This is why you are having errors with your divs that contain the ID "gold".

If you need to be able to refer to multiple elements I recommend using a class instead.

<div class="gold hidden">this is a gold</div>
<div class="gold hidden">this is a gold again</div>
AJ Gregory
  • 1,589
  • 18
  • 25