Solved

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

Posted on 2014-04-22
7
625 Views
Last Modified: 2014-04-24
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.
0
Comment
Question by:93jordanaj
7 Comments
 
LVL 6

Expert Comment

by:Brijesh Gandhi
ID: 40014547
try it

Code
0
 
LVL 1

Author Comment

by:93jordanaj
ID: 40014570
@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
 
LVL 6

Expert Comment

by:Brijesh Gandhi
ID: 40014580
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 5

Expert Comment

by:jayakrishnabh
ID: 40014860
<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
 
LVL 1

Author Comment

by:93jordanaj
ID: 40015550
@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
 
LVL 19

Accepted Solution

by:
Albert Van Halen earned 250 total points
ID: 40017335
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
 
LVL 1

Author Closing Comment

by:93jordanaj
ID: 40019547
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

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now