CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Saji
Saji

Reputation: 165

jQuery toggle function - how does it work?

I just created a page to understand jQuery toggle function. By single clicking block 'P' I want block 'A' to animate and clicking it again would undo the animation. (ex. let's say block 'A' animate left side of 100px; then when I click again on block 'P' it will reset to 0px;)

I have zero knowledge in jQuery so step by step instruction will be much appreciate.

Here is my codes:

$(document).ready(function() {
  $(".nav").on("click", function() {
    $(".trigger-default").animate({
      left: "140px"
    })
  })
})
span {
  font-size: 80px;
  padding-left: 50px;
}
.nav {
  width: 100px;
  height: 100px;
  display: block;
  background: #7A848F;
  margin: 50px 160px;
  color: #fff;
  cursor: pointer;
}
.trigger-default {
  width: 100px;
  height: 100px;
  display: block;
  background: #7A848F;
  margin: 20px 100px;
  cursor: pointer;
}
.trigger-secondary {
  width: 100px;
  height: 100px;
  display: block;
  background: #7A848F;
  margin: 20px 300px;
  cursor: pointer;
}
.trigger-default,
.trigger-secondary {
  display: inline;
  position: absolute;
  color: #fff;
}
.nav:hover {
  background: #5BBC2E;
}
.trigger-default:hover {
  background: #202021;
}
.trigger-secondary:hover {
  background: #E12B26;
}
<div class="nav">
  <span>P</span>
</div>
<div class="trigger-default">
  <span>A</span>
</div>
<div class="trigger-secondary">
  <span>B</span>
</div>

Upvotes: 2

Views: 123

Answers (3)

5ervant - techintel.github.io
5ervant - techintel.github.io

Reputation: 4479

This will assign leftVal = 0 and style="left: 0;" the .trigger-default element if it has left: 140px; otherwise this will assign leftVal = "140px" and style="left: 140px;".

$(document).ready(function() {
  $(".nav").on("click", function() {
    
    var leftVal = ($(".trigger-default").css('left') === "140px" ? 0 : "140px");
    
    $(".trigger-default").animate({
      left: leftVal
    })
  })
})
span {
  font-size: 80px;
  padding-left: 50px;
}
.nav {
  width: 100px;
  height: 100px;
  display: block;
  background: #7A848F;
  margin: 50px 160px;
  color: #fff;
  cursor: pointer;
}
.trigger-default {
  width: 100px;
  height: 100px;
  display: block;
  background: #7A848F;
  margin: 20px 100px;
  cursor: pointer;
}
.trigger-secondary {
  width: 100px;
  height: 100px;
  display: block;
  background: #7A848F;
  margin: 20px 300px;
  cursor: pointer;
}
.trigger-default,
.trigger-secondary {
  display: inline;
  position: absolute;
  color: #fff;
}
.nav:hover {
  background: #5BBC2E;
}
.trigger-default:hover {
  background: #202021;
}
.trigger-secondary:hover {
  background: #E12B26;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
  <span>P</span>
</div>
<div class="trigger-default">
  <span>A</span>
</div>
<div class="trigger-secondary">
  <span>B</span>
</div>

Upvotes: 1

Dmitry Ivanov
Dmitry Ivanov

Reputation: 381

$(document).ready(function() {
  $(".nav").toggle(function(){
      $('.trigger-default').animate({
        left: 140
      })
    }, function(){
      $('.trigger-default').animate({
        left: 0
      })
    });
});

Upvotes: 0

michelem
michelem

Reputation: 14590

You can play with something like this:

JSFiddle

$(document).ready(function() {
  $(".nav").on("click", function() {
      $(".trigger-default").toggle(function () {
          $(this).animate({right: "140px"});
      }, function () {
          $(this).animate({left: "140px"});
      });
  })
})

You should adjust CSS/animation

Upvotes: 0

Related Questions