CODEWITHSUNDEEP
javascriptjquery
StuBlackett
StuBlackett

Reputation: 3857

Creating a toggle on click

I am trying in jQuery to click a link and the content within it then comes in to 0px from the right of the screen. Then when you click it again, It closes, a kind toggle effect.

My current jQuery is:

$('.bet-slip-outer').click(function() {
    // Responsive Stuff...
    var windowwidth = $(window).width();

    $('.bet-slip').animate({
        'right': '-240px'
    });
}, function() {
    $('.bet-slip').animate({
        'right': '0px'
    });
});

However when I click the .bet-slip the right:-240 just seems to take precedence.

What am I doing wrong?

Cheers

Upvotes: 1

Views: 269

Answers (4)

Starboy
Starboy

Reputation: 1635

QUITE HARDING-CODING STYLE VARIABLES IN JS!

You could do something like:

$( ".bet-slip-outer .bet-slip" ).toggleClass( "animation" );

Then in your CSS you would do:

  .bet-slip-outer .bet-slip { right: 0px;}
  .animation { right: -240px;}

Why to use this option over others?

  • Your not hard-coding STYLE variables in your java-script your leaving that to CSS (what it's made for). As the project grows if you keep hard-coding it will eventually make your JS code base 'smell.' IE: I pain to change down the road!

Upvotes: 0

alessandrio
alessandrio

Reputation: 4370

with conditional:

define right style.

<div class="bet-slip" style="right:0px;"></div>

jquery

$('button').click(function() {
    if($('.bet-slip').css('right') === '0px' ){
        $('.bet-slip').animate({'right':'-240px'});
    } else {
        $('.bet-slip').animate({'right':'0px'});
    }
});

other

only style:

$('button').click(function(){
    $('div').toggleClass('right');
});
div{
	position:relative;
	width:100px;
	height:10px;
	background:green;
	right:-100px;
	transition:1s;
}
.right{
	right:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    
</div>
<button>
    f
</button>

Upvotes: 2

Terry
Terry

Reputation: 66093

According to the official documentation, the .click() method only accepts a single handler. You cannot declare two different handlers for that purpose. There are two solutions to that — one is to delegate the animation to CSS, and use .toggleClass() instead, or to use stateful code:

  • Store the toggle status of the element in its own jQuery data object
  • Read the data object. If it doesn't exist or is 0, do something (condition 1)
  • If it exists and is 1, do something else (condition 2)

You can of course modify the binary conditions 1 and 2 into the effect you want to achieve.

In addition, in order to prevent jerky animation due to rapid clicking/toggling, you should stop the animation before you more animations to the queue. This is done by chaining .stop(true, true) to the object.

$(function() {
  $('.bet-slip-outer').click(function() {
    // Check state
    if(!$(this).data('toggle') || $(this).data('toggle') == 0) {
      $(this).data('toggle', 1);
      $('.bet-slip').stop(true, true).animate({
        'right': '-240px'
      });
    } else {
      $(this).data('toggle', 0);
      $('.bet-slip').stop(true, true).animate({
        'right': '0'
      });
    }
  });
});
.bet-slip {
  position: relative;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bet-slip-outer">
  <div class="bet-slip">bet-slip</div>
</div>

Upvotes: 1

Velimir Tchatchevsky
Velimir Tchatchevsky

Reputation: 2815

Use a variable to check if the element has been clicked yet.

toggle = "on";
$('.bet-slip-outer').click(function() {
    // Responsive Stuff...
    var windowwidth = $(window).width();
    if(toggle == "on"){
        $('.bet-slip').animate({
            'right': '0px'
        });
        toggle = "off";
    }else{
        $('.bet-slip').animate({
            'right': '-240px'
        });
    }
});

Upvotes: 1

Related Questions