jQuery Toggle Show/Hide w/Multiple DIV ID's_问答_开发者

CODE:

$(document).ready(function() {

    $('.toggle').hide();

    $('.show').click(function(){

        $('.toggle').toggle('slow'); 

   开发者_运维问答     $(this).attr('src','images/checkmark2.jpg');

    },function(){

        $('.toggle').toggle('slow'); 

        $(this).attr('src', 'images/checkmark1.jpg');

        return false;
    });
});

HTML:

<img class="show" src="images/checkmark1.jpg"/>Header Text

Hidden Text is in a div class "toggle" to be seen when you click on the checkmark1.jpg image. With multiple "toggle" div classes, they all expand at once.

When "toggle" is set to ID # in the Script and HTML, they expand independently (as how I would like), but you cannot use the same DIV ID # Name throughout. So how would i change the code to use multiple toggle DIV IDs; or use "toggle" classes that don't expand every one at once ???

HERE is a direct link to my code. http://www.flipflopmedia.com/test/ToggleTEST_html.txt When I try to insert it, it's being rendered and not displaying so that you can actually see it. Yes, I'm using the code button 'enter code here' to apply it, not working!

Since you didn't provide any HTML to work from, I put some together with script that works

HTML

 <img class="show" src="images/checkmark1.jpg" /><span>Header Text 1</span>
 <div class="toggle">This is some hidden text #1</div>

 <img class="show" src="images/checkmark1.jpg" /><span>Header Text 2</span>
 <div class="toggle">This is some hidden text #2</div>

Script (updated to work with your HTML)

$(document).ready(function(){
 $('.toggle').hide();
 $('.show').click(function(){
  var t = $(this);
  // toggle hidden div
  t.next().next().toggle('slow', function(){
   // determine which image to use if hidden div is hidden after the toggling is done
   var imgsrc = ($(this).is(':hidden')) ? 'images/checkmark1.jpg' : 'images/checkmark2.jpg';
   // update image src
   t.attr('src', imgsrc );
  });
 })
})

The "click" function only allows you to add one function (the one that's fired when you click the selected element(s)). But you're passing it two. You probably want to use the "toggle" function instead. See this question for more info:

jQuery Toggle State

Use both an ID and a Class:

<p id="myP1" class="toggle">Hello World</p>

When you need to handle it specifically:

$("#myP1").toggle();

When you want to handle it with the rest:

$(".toggle").hide();

You want be able to derive the id for the element(s) to toggle from the attributes of the element being clicked. In other words, based solely on the information contained within attributes the element being clicked, you can construct the id (and/or classes) for the element(s) to toggle.

Possibly correlate the id of the element with the onclick handler to the id of the element(s) you want to toggle. For example, if you click on an img with id="checkmark1" and make the element being toggled have id="checkmark1_content", then your click handler can be:

$('#' + this.id + '_content').toggle();

Classes would be used for toggling more than one (or a few) elements:

$('.' + this.id + '_content').toggle();

Based on the test-case provided in the comments below, here is the solution:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      Toggle Test
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {
        $('.toggle').hide();
        $('img').attr('src','images/checkmark1.jpg');
        $('.toggler').click( function() {
          var target = this.id + '_content';
          // Use ID-selectors to toggle a single element.
          $('#' + target).toggle();
          // Use class-selectors to toggle groups of elements.
          $('.' + target).toggle();
          $('.toggle.always').toggle();
        });
        $('#toggle_everything').click( function() { $('.toggle').toggle(); });
    });
    //]]></script>
  </head>
  <body>
    <div class="toggler" id="toggle1"><img/>Toggle 1</div>
    <div class="toggler" id="toggle2"><img/>Toggle 2</div>
    <div class="toggler" id="toggle3"><img/>Toggle 3</div>
    <div id="toggle_everything"><img/>Toggle Everything</div>
    <hr/>
    <div class="toggle" id="toggle1_content">only toggle1</div>
    <div class="toggle" id="toggle2_content">only toggle2</div>
    <div class="toggle" id="toggle3_content">only toggle3</div>
    <div class="toggle always">always toggled</div>
    <div class="toggle toggle1_content toggle2_content">toggle1 and toggle2</div>
    <div class="toggle toggle1_content toggle3_content">toggle1 and toggle3</div>
    <div class="toggle toggle2_content toggle3_content">toggle2 and toggle3</div>
    <div class="toggle toggle1_content toggle2_content toggle3_content">toggle1, toggle2 and toggle3</div>
  </body>
</html>

The problem lies here:

$('.toggle').toggle('slow');

This piece of code will of course toggle all the HTML elements with class="toggle".

Depending on your HTML structure, do something like this instead:

$(function() {
 $('.toggle').hide();
 $('.show').click(function() {
  $(this).next('.toggle').toggle('slow'); 
  $(this).attr('src', 'images/checkmark2.jpg');
  return false;
 }, function() {
  $(this).next('.toggle').toggle('slow'); 
  $(this).attr('src', 'images/checkmark1.jpg');
  return false;
 });
});