I'm using JQuery to hide a map on the page and then insert a show/hide text link that, when clicked will reveal the <span> that contains the map. I want to toggle the text between show and hide depending on whether the map section is visible or not.

I've got the show/hide function working and the text is initially set to show when the map is hidden. Clicking on the text will show the map and change the text to hide.

I'm having problems changing the text back to 'show' if the user clicks on the hide map link.

I'm not sure why this doesn't work. Any suggestions as to how I can get the text to change back on the second click or an explanation of why this code doesn't work?

thanks,Martin

chris_upjohn
—
2012-08-27T03:21:12Z —
#2

Hi boycetrus and welcome to SitePoint,

The reason as to why your above code isn't working correctly is due to how you have setup the element for the toggle event, instead of targeting specific elements by their class name or ID you really should be using some built into jQuery methods which help with situations like this. See the below for a version of the above code that should work fine.

The reason as to why your above code isn't working correctly is due to how you have setup the element for the toggle event, instead of targeting specific elements by their class name or ID you really should be using some built into jQuery methods which help with situations like this. See the below for a version of the above code that should work fine.

Thanks for that Chris.I'm relatively new to jquery (and fairly useless at javascript), however I've worked my way through most of your code above and, although there are a couple of new bits to me in there, I understand what's going on for the most part.

I am having a bit of trouble deciphering what's actually happening with the line that swaps the text of the button based on the visibility of the $map object, ie.

$(this).text(($map.is(':visible') ? 'Show' : 'Hide') + ' Map');

I can see that $(this).text(...) is setting the text of the buttonI gather that ...'Show' : 'Hide') + ' Map') is concatenating show or hide with map to create the text string.

I'm just not sure how the test for whether $map (.event-map) is visible works. That is, this bit ($map.is(':visible') ? 'Show' : 'Hide')

If anyone can explain exactly what's happening in this snippet of code I would be very grateful.

cheers,Martin

boycetrus
—
2012-08-28T03:02:24Z —
#4

Hi again,Never mind about the follow up. I just went digging around a bit more and I think I've worked it out.

The ? is a conditional operator so if $map.is(':visible') returns true then use Show, otherwise use Hide. I can see how the conditional operator can be used as an alternative to if/else.

thanks for your help.Martin

chris_upjohn
—
2012-08-28T03:26:13Z —
#5

That's correct, for future reference just so you know it's called a ternary operator which you can call a conditional operator but that would get confusing as if/else statements also have conditional operators aka && (and) and || (or).

boycetrus
—
2012-08-28T05:38:44Z —
#6

chris_upjohn said:

That's correct, for future reference just so you know it's called a ternary operator which you can call a conditional operator but that would get confusing as if/else statements also have conditional operators aka && (and) and || (or).

Got it!Thanks Chris.

Martin

Paul_Wilkins
—
2012-08-28T11:11:10Z —
#7

chris_upjohn said:

That's correct, for future reference just so you know it's called a ternary operator which you can call a conditional operator but that would get confusing as if/else statements also have conditional operators aka && (and) and || (or).

Here's how they break down.

The following code is an example of what the ternary operator deals with:

if (member === true) {
fee = 2;
} else {
fee = 10;
}

With the ternary operator, you can handle the above situation as a single line, without losing the ability to easily understand what is going on.

fee = (member === true) ? 2 : 10;

The && operator is the AND operator; also called a guard condition. If the first part is falsy (null, undefined, 0, empty string, false, etc...) then the test fails, and the next part isn't even processed. This means that you can use it to protect against situations that may cause a syntax error.