How to toggle a div from right to left in jquery

Question

I have this fiddle where I am trying to create a floating div which should toggle from right to left .

I am very new to UI so my code is bit messy

here is my code and FIddle

$(".widget-toggle-btn").click(function() {
  // Set the effect type
  var effect = 'slide';

  // Set the options for the effect type chosen
  //var options = { direction: $('.mySelect').val() };

  // Set the duration (default: 400 milliseconds)
  var duration = 500;

  $('.widget').toggle(effect, 'right', duration);
});

.widget {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 0px 4px 4px 4px;
  padding: 1.0005rem;
  -moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
  float: right;
  width: 87%;
}
.home-body aside {
  padding: 1.3125rem 0;
  padding-left: 1.3125rem;
  padding-right: 1.3125rem;
  float: left;
}
.find-out-more {
  background: #16a085;
  color: #fff;
}
.widget-toggle-btn {
  width: 46px;
  height: 84px;
  float: left;
  border-radius: 4px 1px 1px 4px;
  padding-left: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="col-md-4">
  <div id="popup-x">
    <div class="widget-toggle-btn find-out-more ">
      Click me to toggle him!
    </div>
    <div class="widget find-out-more  ">
      <form action="" name="learn-more" id="learn-more" method="POST">
        <h5 id="head-element" name="head-element">For Admissions, Enroll Now!</h5>
        <input type="email" name="emailId" id="emailId2" placeholder="Email address">
        <div id="emailError2" style="margin-top:-15px;font-size:12px;display:none"></div>
        <input type="text" id="name2" name="name" placeholder="Full Name" title="Full Name">
        <div id="nameError2" style="margin-top:-15px;font-size:12px;display:none"></div>
        <input type="tel" id="phoneNumber2" name="phoneNumber" placeholder="Phone Number" maxlength="13" onkeypress="return isNumberKey(event)">
        <div id="phoneError2" style="margin-top:-15px;font-size:12px;display:none"></div>
        <div id="image-load"></div>
        <input id="courseSelection" name="courseSelection" title="Course" type="hidden" value="" />
        <input id='redirectionUrl' type='text' style='display:none;' name='redirectionUrl' value='/' />
        <input type='hidden' style='display:none;' name='leadGroup' value='pondi' />
        <input type="submit" class="button" onclick="return validatePhone()" value="SUBMIT" />
      </form>

      <p class="disclaimer-popup">*Please note that by filling the form, you are agreeing to our terms & conditions in the <a href="disclaimer" class="disclaimer-popup-link" target="_blank">disclaimer section</a>.</p>
    </div>
  </div>
  <br>
</aside>

So if you click on that toggle button I am getting error that n.easing[this.easing] is not a function

Can any one help me fix this thanks

Answer 1

You have an error in this row:

$('.widget').toggle(effect,'left', duration);

effect and duration are the property names.. you can't just copy it and hope that it's gonna work. if you want to fix it, change it to:

$('.widget').toggle('left');

but if you want to study, read some jQuery tutorial this one for example: http://www.w3schools.com/jquery/

Answer 2

You don't need jQuery for this effect. Doing it with css transforms is more performant.

const button = document.querySelector('button')
const box = document.querySelector('.box')
button.addEventListener('click', function() {
    box.classList.toggle('show')
})

body {
    background-color: mediumseagreen;
}

button {
    border: 1px solid #fff;
    border-radius: 3px;
    background: none;
    padding: 5px;
    margin: 5px;
}

.box {
    display: inline-block;
    padding: 10px;
    margin: 5px;
    background-color: seagreen;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 500ms ease-in-out;
}

.show {
    transform: scaleX(1);
}

        <button>Toggle</button>
        <div class="box">
            I'm just a simple box!
        </div>

Answer 3

you missed the jQuery ui library. And in your https://jsfiddle.net/KFmLv/6752/ fiddle you called multiple time jquery, jquery ui library.

$(".widget-toggle-btn").click(function() {
  alert('ss');
  // Set the effect type
  var effect = 'slide';

  // Set the options for the effect type chosen
  //var options = { direction: $('.mySelect').val() };

  // Set the duration (default: 400 milliseconds)
  var duration = 500;
 /* $('.widget').animate({
    width: 'toggle'
  }, 400);*/
  $('.widget').toggle(effect,'left', duration);
});

.widget {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 0px 4px 4px 4px;
  padding: 1.0005rem;
  -moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
  float: right;
  width: 87%;
}

.home-body aside {
  padding: 1.3125rem 0;
  padding-left: 1.3125rem;
  padding-right: 1.3125rem;
  float: left;
}

.find-out-more {
  background: #16a085;
  color: #fff;
}

.widget-toggle-btn {
  width: 46px;
  height: 84px;
  float: left;
  border-radius: 4px 1px 1px 4px;
  padding-left: 4px;
  margin-left: 19px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<aside class="col-md-4">
  <div id="popup-x">
    <div class="widget-toggle-btn find-out-more ">
      Click me to toggle him!
    </div>
    <div class="widget find-out-more  ">
      <form action="" name="learn-more" id="learn-more" method="POST">
        <h5 id="head-element" name="head-element">For Admissions, Enroll Now!</h5>
        <input type="email" name="emailId" id="emailId2" placeholder="Email address">
        <div id="emailError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
        <input type="text" id="name2" name="name" placeholder="Full Name" title="Full Name">
        <div id="nameError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
        <input type="tel" id="phoneNumber2" name="phoneNumber" placeholder="Phone Number" maxlength="13" onkeypress="return isNumberKey(event)">
        <div id="phoneError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
        <div id="image-load"></div>
        <input id="courseSelection" name="courseSelection" title="Course" type="hidden" value="" />
        <input id='redirectionUrl' type='text' style='display:none;' name='redirectionUrl' value='/' />
        <input type='hidden' style='display:none;' name='leadGroup' value='pondi' />
        <input type="submit" class="button" onclick="return validatePhone()" value="SUBMIT" />
      </form>

      <p class="disclaimer-popup">*Please note that by filling the form, you are agreeing to our terms & conditions in the <a href="disclaimer" class="disclaimer-popup-link" target="_blank">disclaimer section</a>.</p>
    </div>
  </div>
  <br>
</aside>

Updated

$(".widget-toggle-btn").click(function() {
  var effect = 'slide';
  var options = { direction: 'right' };
  var duration = 500;
  $('.widget').toggle(effect, options, duration);
});

.widget {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 0px 4px 4px 4px;
  padding: 1.0005rem;
  -moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
  float: right;
  width: 87%;
  display: none;
}

.home-body aside {
  padding: 1.3125rem 0;
  padding-left: 1.3125rem;
  padding-right: 1.3125rem;
  float: left;
}

.find-out-more {
  background: #16a085;
  color: #fff;
}

.widget-toggle-btn {
  width: 46px;
  height: 84px;
  float: left;
  border-radius: 4px 1px 1px 4px;
  padding-left: 4px;
  margin-left: 19px;
}
#popup-x{
    position: absolute;
    right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<aside class="col-md-4">
  <div id="popup-x">
    <div class="widget-toggle-btn find-out-more ">
      Click me to toggle him!
    </div>
    <div class="widget find-out-more  ">
      <form action="" name="learn-more" id="learn-more" method="POST">
        <h5 id="head-element" name="head-element">For Admissions, Enroll Now!</h5>
        <input type="email" name="emailId" id="emailId2" placeholder="Email address">
        <div id="emailError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
        <input type="text" id="name2" name="name" placeholder="Full Name" title="Full Name">
        <div id="nameError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
        <input type="tel" id="phoneNumber2" name="phoneNumber" placeholder="Phone Number" maxlength="13" onkeypress="return isNumberKey(event)">
        <div id="phoneError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
        <div id="image-load"></div>
        <input id="courseSelection" name="courseSelection" title="Course" type="hidden" value="" />
        <input id='redirectionUrl' type='text' style='display:none;' name='redirectionUrl' value='/' />
        <input type='hidden' style='display:none;' name='leadGroup' value='pondi' />
        <input type="submit" class="button" onclick="return validatePhone()" value="SUBMIT" />
      </form>

      <p class="disclaimer-popup">*Please note that by filling the form, you are agreeing to our terms & conditions in the <a href="disclaimer" class="disclaimer-popup-link" target="_blank">disclaimer section</a>.</p>
    </div>
  </div>
  <br>
</aside>

Answer 4

You can do it like this also. refer the working demo

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	
</head>

<style type="text/css">

div.mydiv{
	width: 0px;
	height: 100px;
	position: absolute;
	left: 70px;
	top: 20px;
	background-color: orange;
	overflow: hidden;
	text-align: center;
	color: white;

}

#mybutton{
	width: 70px;
	height: 100px;
	color: white;
	position: absolute;
	top:20px;
	left:0px;
	background-color: black;
	color: orange;
}

</style>


<body>

<div class="mydiv">Hello StackOverflow ......</div>
<button id="mybutton">Click on me</button>

<script type="text/javascript">

var theNum = 0;

$("#mybutton").click(function(){
	theNum = theNum +1;
	
	if(theNum%2 != 0)
	{
		$("div.mydiv").animate({width:500},1000);
	}
	else
	{
		$("div.mydiv").animate({width:0},1000);
	}
});


</script>




</body>


</html>

NOTE : This answer is for your request. refer the below working demo.click on the button to see. hope this will help to you. change the positions and sizes as your need.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	
</head>

<style type="text/css">

div.holder{
	width: 400px;
	height: 600px;
	position: absolute;
	right: 0;

}

div.holder div.formholder{
	width: 0px;
	height: 600px;
	background-color: orange;
	position: absolute;
	right: 0;
}

#mybutton{
	width: 50px;
	height: auto;
	position: absolute;
	right: 0px;
}



</style>


<body>

<div class="holder">
	<div class="formholder"></div>
	<button id="mybutton">C<br>L<br>I<br>C<br>K<br><br> O<br>N<br> <br>M<br>E</button>
</div>

<script type="text/javascript">

var my_val = 0;
$("#mybutton").click(function(){
	my_val = my_val+1;

	if (my_val%2 != 0) 
	{
		$("div.formholder").animate({width:300},1000);
		$("#mybutton").animate({right:300},1000);
	}
	else
	{
		$("div.formholder").animate({width:0},1000);
		$("#mybutton").animate({right:0},1000);
	}
});


</script>




</body>


</html>

Answer 5

Sorry I can't add a comment, but the button is fixed because it does not have class .widget

Answer 6

you can use float values in jquery.

    $(".widget-toggle-btn").click(function() {
  alert('ss');
  // Set the effect type
  var effect = 'slide';

  // Set the options for the effect type chosen
  //var options = { direction: $('.mySelect').val() };

  // Set the duration (default: 400 milliseconds)
  var duration = 500;
 /* $('.widget').animate({
    width: 'toggle'
  }, 400);*/
  $('.widget').css('float','left');
    $('.widget-toggle-btn').css('float','right');

});

Here is your update code. https://jsfiddle.net/KFmLv/6753/

Answer 7

You need to download the jquery ui plugin. all the effects are binding in a single file.

Link for Jquery UI Effects