3

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!

Charles Sprayberry
  • 7,741
  • 3
  • 41
  • 50
flipflopmedia
  • 517
  • 3
  • 6
  • 16
  • 2
    Post your HTML for a better answers. – Sampson Jan 17 '10 at 19:12
  • Sorry it wouldn't let me :( I have example pages below, but I had to 'answer my own question' because my reply to everyone had too many characters. Apparently I don't get this forum and better than I do jQuery. Beer Time! – flipflopmedia Jan 17 '10 at 22:04
  • 2
    flipflopmedia: This is **not** a forum. If you have updates, you need to edit your question. – Sampson Jan 18 '10 at 13:36
  • edit my question!? Darn! Thank you. Why didn't I think of that. Will do from now on!! – flipflopmedia Jan 18 '10 at 14:11

5 Answers5

7

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 );
  });
 })
})
Mottie
  • 84,355
  • 30
  • 126
  • 241
  • Copied this completely and I get the exact same result as I already have. They all expand/contract when clicking on a single image. – flipflopmedia Jan 18 '10 at 12:34
  • I don't know what's different about what you are doing, but I posted a demo of my script here (http://pastebin.me/7c6962d7e70c49f97237cd465e26fb09) for you to see that it does work. – Mottie Jan 18 '10 at 18:38
  • I updated my script to work with the HTML you provided. Basically, I made it work without a div wrapping each block. – Mottie Jan 19 '10 at 12:06
  • That's flippin' it! Your dang demo works! Unflippin' believable! Ok, I have got to implement this with my own images and text. Thank you, Thank you, Thank you, Thank you!!! A thousand times! The images change when clicked upon AND it only fires it's related div; if that makes sense, it's beautiful. I have been trying to figure this out for 4 solid days now! – flipflopmedia Jan 19 '10 at 12:24
  • I think you're using jQuery 1.3.1, and I, 1.2.3. Still works, but should I use the pack you are using? It's perfect, worked like a charm! :) Thank You! Problem Solved! Next? LOL! Now I can get on with the rest of my life! :) – flipflopmedia Jan 19 '10 at 12:34
  • fudgey, I just read your other comment, explaining things and how they work, and how they were not working with what I had... also read the answer to my own question: to update the jQuery pack. Will Do! And thank you again, and for the detailed explanation! – flipflopmedia Jan 19 '10 at 12:55
  • Glad that it solved now :) and yes it is actually better to use google's jQuery version as it reduces the load on your server and is much faster as it is probably already cached on the users computer from other sites that link to google's version. – Mottie Jan 19 '10 at 12:58
  • Thank you! :) And also, because you had explained things in great detail of how this script works, I was able to resolve a problem I ran into on my own by adding two additional .next().next() to the code; because I actually have 3 span tags prior to the hidden div. Here's the page it's applied to: http://www.flipflopmedia.com/MOAA/CurrentOfficers.html – flipflopmedia Jan 21 '10 at 14:33
1

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

Community
  • 1
  • 1
Ian Varley
  • 9,227
  • 5
  • 29
  • 34
  • toggle was the original usage, I changed it to click because it was used in a similar script. Either way makes no difference. Same results. – flipflopmedia Jan 18 '10 at 12:23
0

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();
Sampson
  • 265,109
  • 74
  • 539
  • 565
  • Tried that, didn't work. Or perhaps I'm not applying it correctly. I'm going to have like 10+ hidden divs, that need to be called upon specifically, by the image next to each one. Do I insert this line in the script giving each one a unique ID, and then update the code accordingly? I have ex. pages in my second post above. – flipflopmedia Jan 18 '10 at 12:31
  • It's not letting me add the code. I have example pages here: http://www.flipflopmedia.com/test/ToggleTEST.html http://www.flipflopmedia.com/test/ToggleTEST2.html – flipflopmedia Jan 18 '10 at 14:00
  • http://www.flipflopmedia.com/test/ToggleNEW2.html Found this script that works, swapping images and divs correctly, but it uses a switch method, and I want to use toggle. Not sure if it would be easier or possible to apply it to this script, seeing that it's already working... just need it to toggle. – flipflopmedia Jan 18 '10 at 14:03
  • flipflop, without knowing your HTML I cannot comment. I'm sorry. – Sampson Jan 18 '10 at 14:17
  • Here it is, http://www.flipflopmedia.com/test/ToggleTEST_html.txt used on this page: http://www.flipflopmedia.com/test/ToggleTEST.html And here's the code: http://www.flipflopmedia.com/test/ToggleTEST2_html.txt used on this page: http://www.flipflopmedia.com/test/ToggleTEST2.html I have tried numerous times to add my code directly here, but it's rendering it vs. setting it as plain text so that y'all can see it! Sorry!! – flipflopmedia Jan 18 '10 at 14:21
0

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>
nicerobot
  • 9,145
  • 6
  • 42
  • 44
  • This makes sense, but I cannot apply it to the script correctly to make it work!! I must be doing something wrong. This is what I'm looking for. A simple line in the script that will tell it if XXX is appended to id name, then expand/hide that one. Can you help me out some more please. My test pages are here: http://www.flipflopmedia.com/test/ToggleTEST.html These are the original pages, nothing you have suggested applied. Thanks, Tracy – flipflopmedia Jan 18 '10 at 12:53
-1

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;
 });
});
Mathias Bynens
  • 144,855
  • 52
  • 216
  • 248