Issue with jQuery click event with if/else statement not firing on first click

I'm a novice when it comes to jQuery/JavaScript, but I have put the following together.

The idea is that when an element is clicked the corresponding text is displayed. If text is already displayed then it will be replaced or hidden depending on the scenario.

The code works as expected, however only after the first click (i.e second onwards). On the first click nothing happens.

$(document).ready(function(){
	
	$(".click-nav-phone").click(function(){
   
	   if( document.getElementById("nav-email").style.display == "none" ) {
			document.getElementById("nav-email").style.display="block";
		} else {
			document.getElementById("nav-email").style.display="none";
		}
		document.getElementById("nav-phone").style.display="none";
   
	});
	
	$(".click-nav-email").click(function(){
   
	   if( document.getElementById("nav-phone").style.display == "none" ) {
			document.getElementById("nav-phone").style.display="block";
		} else {
			document.getElementById("nav-phone").style.display="none";
		}
		document.getElementById("nav-email").style.display="none";
   
	});
	
});

Open in new window


<div class="click-nav-phone"><span>content in here</span></div>
<div class="click-nav-email"><span>content in here</span></div>

<span id="nav-phone">phone number here - default state is hidden</span>
<span id="nav-email">email address here - default state is hidden</span>

Open in new window


Please can someone suggest how I go about updating the script so that it works on first click, or, given my lack of knowledge, provide code snippets to show how I go about getting this to work?

If I remove the if/else statements and replace with alert() it triggers the alert on first click so I assume this is to do with the if/else statements not registering on first click?

NB: I'm aware that inline styling is not best practice. This is for illustration only, I'll be manipulating through adding/removing classes.
LVL 1
93jordanajAsked:
Who is Participating?
 
Albert Van HalenConnect With a Mentor Analyst developerCommented:
Since you're using jQuery already, you can use it in your advantage by using the toggle method.
Try this:
$(document).ready(function () {
    $(".click-nav-phone").click(function () {
        $("#nav-phone").toggle(); // toggles hidden state
        $("#nav-email").hide(); // always hide email
    });
    $(".click-nav-email").click(function () {
        $("#nav-email").toggle(); // toggles hidden state
        $("#nav-phone").hide(); // always hide phone
    });
});

Open in new window

0
 
Brijesh GandhiProgrammerCommented:
try it

Code
0
 
93jordanajAuthor Commented:
@brijeshgandhi21 thanks for checking. Okay, so it's working on JSFiddle, but not on my site. Hmm...

I can't provide a link to the test site due to being under an NDA, but I'm implementing it on WordPress using jQuery version 1.11.0.

Is this likely to be an issue with conflicting scripts or anything like that given that the script itself appears to be okay?
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
Brijesh GandhiProgrammerCommented:
Try to debug it on browser and see what actually happen because I can't help you any more without code ..And if there is jquery conflict then try to remove it.
0
 
jayakrishnabhCommented:
<span id="nav-phone" style="display:none;">phone number here - default state is hidden</span>        
        <span id="nav-email" style="display:none;">email address here - default state is hidden</span>

or

<span id="nav-phone" style="display:block;">phone number here - default state is hidden</span>        
        <span id="nav-email" style="display:none;">email address here - default state is hidden</span>

Hope this is what you are looking for.
0
 
93jordanajAuthor Commented:
@jayakrishnabh thanks for your comment. Unfortunately it's not what I'm trying to achieve. The styling is all in an external style sheet. The "default state is hidden" text was simply for illustrative purposes.

What I'm trying to do is change the state using the JavaScript, which works fins on JSFiddle and on the second click in the live environment, but it's not working on first click.

@brijeshgandhi21 thanks again for your comment. I don't know how to debug JavaScript, but will look into it. As for conflicts couldn't find anything. I deactivated my other scripts with no change. I also updated the first line to the following and it worked in exactly the same way as previously:

jQuery(document).ready(function(){

Open in new window

0
 
93jordanajAuthor Commented:
This works perfectly. Not only has it solved the issue I was experiencing, it's a more concise piece of code nicely explained. Thank you very much. And thanks again to everyone who commented.

Alex
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.