jQuery: Toggling an image when toggling a DIV

Posted by Wanda on Stack Overflow See other posts from Stack Overflow or by Wanda
Published on 2010-03-17T17:26:46Z Indexed on 2010/03/17 17:31 UTC
Read the original article Hit count: 197

Filed under:

toggle

|

div

Hey guys,

I'm trying to write some jQuery that will toggle DIVs open and closed, and it's working, but I want an arrow that will change to "down" if the DIV is expanded, and "right" if the DIV is collapsed.

What I have so far:

  $('.toggleHead').click(function() {
   $('#arrow').attr('src', 'images/icons/down.png');
   $(this).next().toggle();
   return false;
  }).next().hide();

Where would I put the other $('#arrow').attr('src', 'images/icons/right.png');?

Thanks!

© Stack Overflow or respective owner

Related posts about toggle

jQuery UI split button toggle - toggle both parts of the button

as seen on Stack Overflow - Search for 'Stack Overflow'
I would like to implement a toggle splitbutton with jQuery UI that would on toggle action change the style of the "dropdown" part as well (as seen in http://jsfiddle.net/8khz2/3/ - I'd like to appear it on 1st click as white, same as "Toggle" button does). Does anyone see a way to achieve that out… >>> More
jQuery: How to select the next element with name-xyz?

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm trying to build a really simple generic toggle functionality where the toggling "switch" has a class of .toggle and then I want it to toggle() the next element that has the class .toggle-content. Example HTML: <p> <a href="#" class="toggle">Toggle the thing</a> </p> <p… >>> More
jquery toggle, prevent clicking during toggle

as seen on Stack Overflow - Search for 'Stack Overflow'
Given the following jquery code.. $('#toggle').toggle(function() { // perform something }, function() { // perform something else }); Is there any way to prevent the toggle from being fired again if someone clicks while it is performing the function? I referenced http://stackoverflow.com/questions/2489518/tell-jquery-to-ignore-clicks-during-an-animation-sequence… >>> More
Toggle button and Toggle visibility

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm using this jQuery to hide a DIV: $("#slider").click(function() { $(".help").slideToggle(); $("#wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() { $("#slider a").text($(this).is(':visible') ? "Hide" : "Show"); }); }); Instead of altering the text show I want… >>> More
Toggle Blind Effect

as seen on Stack Overflow - Search for 'Stack Overflow'
Is there a way to alter this script to be used as the blind effect. // Andy Langton's show/hide/mini-accordion - updated 23/11/2009 // Latest version @ http://andylangton.co.uk/jquery-show-hide // this tells jquery to run the function below once the DOM is ready $(document).ready(function() { //… >>> More

Related posts about div

add a div.class in a child, only when the parent does not have other div.class

as seen on Stack Overflow - Search for 'Stack Overflow'
i have a html code like this: <div class="someclass"> <div class="childclass"></div> <div class="checkclass"></div> </div> <div class="someclass"> <div class="childclass"></div> </div> <div class="someclass"> <div… >>> More
#div:normal #div:hover #div:SELECTED?

as seen on Stack Overflow - Search for 'Stack Overflow'
Hey guys, On the "services" and "company" pages I have a right sidebar list. This is being included with PHP. So far I have a CSS class for normal and a CSS class for when you hover each item in the list. I want to have a new class for when each list item is selected. So for example in services,… >>> More
Two DIV layers: resize top DIV based on dynamic height of bottom DIV

as seen on Stack Overflow - Search for 'Stack Overflow'
I have two DIV layers, one above the other. In the top DIV, there is an image, and in the bottom DIV, there is a block of text. The amount of text in the bottom DIV will change, thus increasing and decreasing the required height. I need to dynamically decrease the height of the image in the top DIV… >>> More
DIV Overlaying DIV, links in backmost DIV non-accessible

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a photoshop image that is 500x600 that I am using as a background image for the first div. The second div sits over top of the first div and is populated with images. The z-index of the first div is set to 100. The effect is the photoshop image sits over top of all of the smaller images. The… >>> More
Why won't my DIV height grow? Is it because I am using floats?

as seen on Stack Overflow - Search for 'Stack Overflow'
Please help! I am trying to create some div sections and some of these div sections have some other divs that are floated. All of which I have cleared. But the sections are not growing to accomodate the content inside of them. The following is my HTML - <div class="data"> <div class="name">Data</div> … >>> More