jQuery toggle question

[DarrenPower]

Hi,

I wonder if you can help me. I have a right hand column with an image in the background, and questions in the left hand column.

Next to the questions are icons which, when clicked, bring up help text in the right column and hide the column's background image.

If they click on the help text or the icon, then the text disappears, but the background image of the column does not reappear, unsurprisingly.

I'm currently using jQuery toggle.

Is there a way of ensuring that the background image displays when the help test is off? I tried using toggle for the background image also, but if you clicked on the help text for a different question, both would appear and affect layout.

e.g. (.d2a-info is the background image)

$(document).ready(function() {
$('a.showhidecontact, .contact').click( function() {
$('.name').hide();
$('.contact').toggle();
$('.security').hide();
$('.address').hide();
$('.d2a-info').hide();
return false;
});

});

 

[feherke]

Hi

Personally I can not imagine how a background image can be referred. Could you post the related HTML source too ?

Feherke.

http://free.rootshell.be/~feherke/

 

[DarrenPower]

Hi,

I've made a fist of packaging it up to show you what I mean (as it's a .net app not publically available as yet). The bits to look for in the css are:

# Direct to App Navigation and Column

and

# Help Column

Please let me know if anything's unclear as it's quite messy!

Kind regards,

Darren.

 

[feherke]

Hi

That code looks quite bad. I would write it like this :

[b]var[/b] helpnow[teal]=[/teal][green][i]''[/i][/green]

[b]function[/b] [COLOR=darkgoldenrod]ch[/color][teal]([/teal]what[teal])[/teal]
[teal]{[/teal]
  $[teal]([/teal][green][i]'.name'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]hide[/color][teal]()[/teal]
  $[teal]([/teal][green][i]'.contact'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]hide[/color][teal]()[/teal]
  $[teal]([/teal][green][i]'.security'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]hide[/color][teal]()[/teal]
  $[teal]([/teal][green][i]'.address'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]hide[/color][teal]()[/teal]
  $[teal]([/teal][green][i]'.d2a-info'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]show[/color][teal]()[/teal]

  [b]if[/b] [teal]([/teal]what [teal]&&[/teal] helpnow[teal]!=[/teal]what[teal])[/teal] [teal]{[/teal]
    $[teal]([/teal][green][i]'.'[/i][/green][teal]+[/teal]what[teal]).[/teal][COLOR=darkgoldenrod]show[/color][teal]()[/teal]
    $[teal]([/teal][green][i]'.d2a-info'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]hide[/color][teal]()[/teal]
    helpnow[teal]=[/teal]what
  [teal]}[/teal] [b]else[/b] helpnow[teal]=[/teal][green][i]''[/i][/green]
[teal]}[/teal]

$[teal]([/teal]document[teal]).[/teal][COLOR=darkgoldenrod]ready[/color][teal]([/teal][b]function[/b][teal]()[/teal] [teal]{[/teal]
  $[teal]([/teal][green][i]'a.showhidename'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]click[/color][teal]([/teal][b]function[/b][teal]()[/teal][teal]{[/teal][COLOR=darkgoldenrod]ch[/color][teal]([/teal][green][i]'name'[/i][/green][teal])[/teal][teal]}[/teal][teal])[/teal]
  $[teal]([/teal][green][i]'a.showhidecontact'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]click[/color][teal]([/teal][b]function[/b][teal]()[/teal] [teal]{[/teal][COLOR=darkgoldenrod]ch[/color][teal]([/teal][green][i]'contact'[/i][/green][teal])[/teal][teal]}[/teal][teal])[/teal]
  $[teal]([/teal][green][i]'a.showhidesecurity'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]click[/color][teal]([/teal][b]function[/b][teal]()[/teal] [teal]{[/teal][COLOR=darkgoldenrod]ch[/color][teal]([/teal][green][i]'security'[/i][/green][teal])[/teal][teal]}[/teal][teal])[/teal]
  $[teal]([/teal][green][i]'a.showhideaddress'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]click[/color][teal]([/teal][b]function[/b][teal]()[/teal] [teal]{[/teal][COLOR=darkgoldenrod]ch[/color][teal]([/teal][green][i]'address'[/i][/green][teal])[/teal][teal]}[/teal][teal])[/teal]
  $[teal]([/teal][green][i]'.name, .contact, .security, .address'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]click[/color][teal]([/teal][b]function[/b][teal]()[/teal] [teal]{[/teal][COLOR=darkgoldenrod]ch[/color][teal]()[/teal][teal]}[/teal][teal])[/teal]
  [COLOR=darkgoldenrod]ch[/color][teal]()[/teal]
[teal]}[/teal][teal])[/teal]

Note that I not know jQuery, so the above code probably could be optimized and/or beautified.

By the way, do not specify the [tt]javascript:[/tt] pseudo-protocol in event attributes.


Feherke.

http://free.rootshell.be/~feherke/