jQuery: .toggle() doesnt work properly on two different elements.

Question

Hello there,

This is my markup:

<table class="col1table" cellspacing="0" cellpadding="0">
   <tr>
      <td><a class="tips_trigger" href="#"><img src="/img/design/icon_tips_venn.png" /></a></td>
      <td><a class="facebook_trigger" href="#"><img src="/img/design/icon_facebook.png" /></a></td>
      <td><a class="twitter_trigger" href="#"><img src="/img/design/icon_twitter.png" /></a></td>
      <td><a class="myspace_trigger" href="#"><img src="/img/design/icon_myspace.png" /></a></td>
   </tr>
   <tr>
      <td><a class="tips_trigger" href="#">TIPS EN VENN</a></td>
      <td><a class="facebook_trigger" href="#">FACEBOOK</a></td>
      <td><a class="twitter_trigger" href="#">TWITTER</a></td>
      <td><a class="myspace_trigger" href="#">MYSPACE</a></td>
   </tr>
</table>

This is the mark-up for a tool-tip:

<div id="message_tips" class="toolTip">Lorem ipsum dolor sit amet.<br /><br /><br /><br /><br /><br />Lorem ipsum dolor sit amet.</div>

This is my code to hide/unhide tooltip for .tips_trigger (the tooltip has id: "#message_tips"). Notice that there is one .tips_trigger on each row in the table. And there will be one tooltip per "..._trigger-class".

$('.tips_trigger').toggle(function(event){
  event.preventDefault();
    $('#message_tips').css('display', 'block');
  }, function(event){
    $('#message_tips').css('display', 'none');
});

I have two problems:
1. Each of the tips_trigger-classes seems to work the script independatly. What I mean by that is if I click tips_trigger in the first row, it displays the tool-tip. If i click tips_trigger in the second row straight after, it displays the tool-tip again. I have to click the exact same tips_trigger-class istance twice for it to hide it. How can I overcome this problem?
2. Each of the "..._trigger"-classes will have a tool-tip, not just ".tips_trigger". Is there a way to alter my current script so that it works for multiple unhides/hides instead of writing one script per class?

Kind regards,
Marius

Answer 1

It's not entirely clear what you want, but here's a modified example that (I think) fixes your two problems: http://www.jsfiddle.net/fSrLz/

You should not be using the .toggle() function for your click handlers, you should instead use it for the show/hide functionality. To apply to all, you can either do $(".tips_trigger, .facebook_trigger, etc...'), or you can use a fancier selector like $("[class$=_trigger") (that means select all whose class attribute ends with "_trigger").

Here's the JS from that example I modified:

$('[class$=_trigger]').click(function (event) {
    event.preventDefault();
    $('#message_tips').toggle();
});

Answer 2

$('a.tips_trigger').click(function(event){
    event.preventDefault();
    if ($('#message_tips').css('display') == 'block'){
        $('#message_tips').hide();
    }
    else {
        $('#message_tips').show();  
    }
});

Answer 3

One elegant solution for handling multiple tool tips would be something like this:

1. Modify tooltip triggers to something like:
   <li><a href="#tooltip_type2" class="tooltip-trigger">Type 1 triggger</a></li>
<li><a href="#tooltip_type2" class="tooltip-trigger">Type 2 trigger</a></li>

2. Modify your tooltips to something like:

<div id="tooltip_type1" class="tooltip_content">Content for type 1</div>
<div id="tooltip_type1" class="tooltip_content">Content for type 2</div>

1. Modify your javascript to:
   $(".tooltip_trigger").click(function() {
var target = $(this).attr('href');
var tooltip_state = 0;
if(tooltip_state) { $(".tooltip_content").css("display", "none"); }
$(target).css("display", "block");
tooltip_state = 1; return false; });

That is the essence I am not bothering with any syntax or other mistakes that I might have made. This solves both your problems.

Answer 4

Hello there,

I used input from: Charlie Brown, Mukund and bcherry to make this:

Markup triggers:

<td><a class="tooltrigger" href="#tip1"><img src="/img/design/icon_tips_venn.png" /></a></td>
<td><a class="tooltrigger" href="#tip2"><img src="/img/design/icon_facebook.png" /></a></td>

Markup tooltips:

<div id="tip1" class="tooltip">Lorem Ipsum Donor ist.<br /><br /><br /><br /><br /><br />Lorem Ipsum Donor ist.</div>
<div id="tip2" class="tooltip">Facebook Lorem Ipsum Donor ist.<br /><br /><br /><br /><br /><br />Facebook Lorem Ipsum Donor ist.</div>

Script:

$('.tooltrigger').click(function(event){
     event.preventDefault();
     $(
          '.tooltip' + $(this).attr('href')
     ).toggle().siblings().hide();
});

The script is tested and works well, but any further suggestions are appreciated.

Thank you all for you help.

Kind regards,
Marius