JQuery: .toggle () not working properly on two different elements

Question

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 an inscription for a clue:

<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 / hide the tooltip for .tips_trigger (the tooltip has an id: "#message_tips"). Note that there is one .tips_trigger in each row of the table. And there will be one clue for the "...- trigger class."

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

:
1. tips_trigger, -, script . , tips_trigger , . tips_trigger, . tip_trigger-class istance , . ?
2. "..._ " , ".tips_trigger". script, / , script ?

,
Marius

Answer 1

: Charlie Brown, Mukund bcherry, :

:

<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>

:

<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();
});

script , .

Answer 2

, , , ( ) : http://www.jsfiddle.net/fSrLz/

.toggle() , show/hide. , $(".tips_trigger, .facebook_trigger, etc...'), fancier, $("[class$=_trigger") ( , , "_trigger" ).

JS :

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

Answer 3

- :

• - :
  <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>

• - :

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

3. javascript :
   $(".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; });

, , . .

Answer 4

. slideDown() div, .

, slideDown() , .

- :

$('#gallery_toggle').toggle(function() {
    $('#gallery_slide').slideDown();
}, function() {
    $('#gallery_slide').slideUp();
});

$('#another_gallery_toggle').click(function(){
    $('#gallery_toggle').trigger('click');
});

, !

Answer 5

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