CODEWITHSUNDEEP
javascriptjqueryhtmlcss
BirdQuestions
BirdQuestions

Reputation: 33

Have to click twice on jQuery

Hi. I have the following code that can also be seen live here: http://designliving.tk/test.html When you click on "View 360" the <div> and Text changes as you can see.

When you click on "this is an image" it should reset it back to "View 360" which it does.

Now the only problem is that when you click on "this is an image" you have to click on "view 360" twice to get the DIV to change again.

It should change on the first click. I have tried rearranging my code with no success.

<!DOCTYPE html>
<html>
  <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('#toggleDiv').toggle(function() {
      $('#imgThree').show();
      $('#imgNorm').hide();
      $(this).html('<a href="#">View Normal</a>');
    }, function() {
      $('#imgThree').hide();
      $('#imgNorm').show();
      $(this).html('<a href="#">View 360</a>');
    });
    $('#changeDiv').click(function() {
      $('#imgThree').hide();
      $('#imgNorm').show();
      $('#toggleDiv').html('<a href="#">View 360</a>');
    });
  });
</script>

<style type="text/css">
  #imgThree {
    display: none;
  }
</style>
  </head>
  <body>
<div id="toggleDiv"><a href="#">View 360</a></div>
<br>
<br>
<div id="imgNorm">Normal Product Image Here</div>
<div id="imgThree">360 Spin Image Here</div>
<br>
<br>
<div id="changeDiv">
<a href="#">This is an image</a><br>
<a href="#">This is an image</a><br>
<a href="#">This is an image</a>
</div>
  </body>
</html>

Thank you all for helping.

Upvotes: 2

Views: 2543

Answers (1)

worenga
worenga

Reputation: 5856

$(document).ready(function(){
    hide = function(){
      $('#imgThree').hide();
      $('#imgNorm').show();
      $('#toggleDiv').html('<a href="#">View 360</a>');
    }
    $('#toggleDiv').toggle(function() {
      $('#imgThree').show();
      $('#imgNorm').hide();
      $(this).html('<a href="#">View Normal</a>');
    }, hide);
    $('#changeDiv').click(function(){
        if($('#imgThree:hidden').length > 0){
           $('#toggleDiv').trigger('click');
        }
    });
  });​

http://jsfiddle.net/HV39C/

Upvotes: 1

Related Questions