Solved

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

Posted on 2014-04-22
7
749 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
arrays and buttons with user input 2 42
javascript and jquery question 4 46
JSON help 8 46
Global version website variable for clearing cache 10 30
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

734 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