html - jQuery Toggle img inside a label -


i think have simple problem.

i trying create simple expand , collapse panel using .toggle.

although content expands , collapses expected, trying place icons user, cannot these images toggle too.

html:

<div class="toggle_head header">     <label>         <img height="30px"; src="http://png-1.findicons.com/files/icons/2338/reflection/128/expand_alt.png" />     </label>     <label class="hide">         <img height="30px"; src="http://png-2.findicons.com/files/icons/2338/reflection/128/collapse_alt.png" />     </label>     <label>expand</label> </div> <div class="toggle_body">     <label>my content</label> </div>

jquery:

$(".toggle_body").hide(); $(".collapse").hide();  $(".toggle_head").click(function () {     var $this = $(this);     $this.next(".toggle_body").slidetoggle("slow", function () {         $this.children('img').toggle();                 }); });

css:

.header {     background: #dadada;     background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dadada), color-stop(100%, #dadada));     background-image: -webkit-linear-gradient(#dadada, #dadada);     background-image: -moz-linear-gradient(#dadada, #dadada);     background-image: -o-linear-gradient(#dadada, #dadada);     background-image: linear-gradient(#dadada, #dadada);     color: #5c5c5c;     height: 45px; } .hide {     display: none; }

here's fiddle: http://jsfiddle.net/oampz/2zp9v/3/

any appreciated.

thanks

the img not direct descendant of .toggle_head, purpose use find instead:

get descendants of each element in current set of matched elements, filtered selector, jquery object, or element.

code:

$(".toggle_body").hide(); $(".collapse").hide();  $(".toggle_head").click(function () {     var $this = $(this);     $this.next(".toggle_body").slidetoggle("slow", function () {         $this.find('img').toggle();     }); });

demo: http://jsfiddle.net/2zp9v/4/


Comments

Post a Comment

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

i using signpost oauth access data magento server. have read various tutorials on same , reach point open browser user can enter credentials. however, per requirement have automate part. hence, user should not browser page. have set-up done on server side ( magento ), hit url , returned call page. same through program in android. i have tried below, consumer = new commonshttpoauthconsumer(key, secret); provider = new commonshttpoauthprovider(oauth_init_url,access_token_url, authorize_url); try { provider.retrieverequesttoken(consumer, oauth.out_of_band); log.d("tokens" , consumer.gettoken() + " -- " + consumer.gettokensecret()); } and request tokens. dont know how bypass next step. tried directly accessing accesstoken (stupid of me) provider.retrieveaccesstoken(consumer, "mycallback://callback"); no luck, ends in oauth.signpost.exception.oauthnotauthorizedexception: authorization failed (server replied 401). ...
Read more

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

getting error org.mockito.exceptions.misusing.invaliduseofmatchersexception: invalid use of argument matchers! 1 matchers expected, 2 recorded. exception may occur if matchers combined raw values: //incorrect: somemethod(anyobject(), "raw string"); when using matchers, arguments have provided matchers. example: //correct: somemethod(anyobject(), eq("string matcher")); at when( getprogramservice .callservice(any(getprogramtype.class))) .thenreturn(jaxbresponse); please explain error , possible resolution the code posted looks fine; don't see problem it. code before or above causing exception. key here: invalid use of argument matchers! 1 matchers expected, 2 recorded. any , used above, doesn't return "special kind of null" or "special kind of getprogramtype"; don't exist. instead, returns null , side effect puts matcher on stack. whe...
Read more

google shop client API returns 400 bad request error while adding an item -

i'm working on solution add items in google shopping market java application. following tutorial real mess because of missing classes of laste release, after setting 1.5-beta maven managed make base example typecheck correctly classes. still can make simple task of adding 1 item. instead of posting whole code i'm posting part creates product feed. private product createproduct(string id) { product product = new product(); product.title = "red wool sweater"; product.content = new content( "text", "comfortable , soft, sweater keep warm on " + "cold winter nights. red , blue stripes."); product.appcontrol = new appcontrol(); product.appcontrol.addrequireddestination("productads"); product.externalid = id; product.lang = "it"; product.country = "it"; product.condition = "nuovo"; product.price = new price("eu...
Read more