ansaurus

Question

jQuery Toggle Show/Hide w/Multiple DIV ID's

Answer 1

+1 A:

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:

http://stackoverflow.com/questions/244392/jquery-toggle-state

Ian Varley 2010-01-17 19:11:44

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 2010-01-18 12:23:12

Answer 2

A:

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

Jonathan Sampson 2010-01-17 19:12:09

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 2010-01-18 12:31:40

You need to show us your HTML.

Jonathan Sampson 2010-01-18 13:36:04

It's not letting me add the code. I have example pages here:http://www.flipflopmedia.com/test/ToggleTEST.htmlhttp://www.flipflopmedia.com/test/ToggleTEST2.html

flipflopmedia 2010-01-18 14:00:41

http://www.flipflopmedia.com/test/ToggleNEW2.htmlFound 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 2010-01-18 14:03:04

flipflop, without knowing your HTML I cannot comment. I'm sorry.

Jonathan Sampson 2010-01-18 14:17:19

Here it is, http://www.flipflopmedia.com/test/ToggleTEST_html.txtused on this page: http://www.flipflopmedia.com/test/ToggleTEST.htmlAnd here's the code: http://www.flipflopmedia.com/test/ToggleTEST2_html.txtused on this page: http://www.flipflopmedia.com/test/ToggleTEST2.htmlI 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 2010-01-18 14:21:46

Answer 3

A:

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 2010-01-17 19:12:11

Copied this completely, and now only the image changes once, but not back to original state; and divs (none) expand.

flipflopmedia 2010-01-18 12:42:26

Answer 4

A:

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <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"&gt;&lt;/script&gt;
    <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 2010-01-17 19:21:35

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.htmlThese are the original pages, nothing you have suggested applied.Thanks,Tracy

flipflopmedia 2010-01-18 12:53:23

Answer edited...

nicerobot 2010-01-18 15:25:22

Answer 5

+2 A:

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

fudgey 2010-01-17 20:39:13

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 2010-01-18 12:34:01

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.

fudgey 2010-01-18 18:38:05

I updated my script to work with the HTML you provided. Basically, I made it work without a div wrapping each block.

fudgey 2010-01-19 12:06:49

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 2010-01-19 12:24:45

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 2010-01-19 12:34:48

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 2010-01-19 12:55:50

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.

fudgey 2010-01-19 12:58:26

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 2010-01-21 14:33:45

Answer 6

A:

Thanks to all of you for your responses, however, I am still stuck. I tried every suggestion (hopefully applying things correctly), to no avail. Here's the link to the test pages (since I was unable to successfully embed the HTML in my post here).

This example uses class of 'toggle' and all expand/contract:

http://www.flipflopmedia.com/test/ToggleTEST.html

This ex. uses ID of 'toggle'; works but the name needs to be unique:

Sorry, I'm only allowed 1 link. Please reference the page above -the link to this example will be at the bottom of the page.

The image swaps great either way, but the hidden div is the problem.

Thanks again. Sorry if I'm just not getting it!

Tracy

flipflopmedia 2010-01-17 22:03:10

ok now that you have posted an example, there are 3 things that need to be fixed: (1) Change the toggle ID to a class (2) using `$('#toggle').toggle('slow');` will only work on the first ID, switching it to `$('.toggle').toggle('slow');` will always toggle ALL elements, so remove it. (3) Because then "next" element after the image is your `<span>Header #<span>` you need to switch your selector to `$(this).next().next().toggle('slow');` because `.next()` will only find the very next element. Adding a selector inside of it only compares it and applies the next function if valid.

fudgey 2010-01-19 11:47:56

I ran out of room, so here is the `.next()` reference (http://api.jquery.com/next/). And also please see the demo I posted in my answer.

fudgey 2010-01-19 11:49:46

Ok, (4) things... update your jQuery from 1.2.3 to v1.4. Link to it using google's servers like this: `<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>`

fudgey 2010-01-19 11:56:19

ansaurus

tags:

views:

answers:

jQuery Toggle Show/Hide w/Multiple DIV ID's

related questions