jQuery slideToggle properties not working

Question

The slideToggle should be able to slide in all (up, right, down and left) directions with the {direction: "x"} property, but I can't seem to get this working. The toggle function just works fine, but when I try to add these properties it just stops working.

I'm trying to get the first element (I mean the fieldset in this case) to move out of the viewport to the left side, and have the second one moving in from the right.

I just started with learning jQuery this morning and I'm getting stuck at this point. Any help would be much appreciated!

This is my code:

$(document).ready(function() {

  $("#firstNext").click(function(){ 
     $("#firstBox").slideToggle('slide', function(){ 
      $("#secondBox").slideToggle('slide' , function(){ 
        $(".log").text('You have successfully toggled!'); 
     });
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="#" method="post">

    <fieldset id="firstBox">
        <label for="naam">Voornaam</label>
        <input type="text" name="naam" placeholder="naam" value="Jan">
        <label for="achternaam">Achternaam</label>
        <input type="text" name="achternaam" placeholder="achternaam" value="de Vries">
        <label for="leeftijd">Leeftijd</label>
        <input type="text" name="leeftijd" placeholder="leeftijd" value="37">
            <div class="next" id="firstNext">Next</div>
    </fieldset>

    <fieldset style="display: none" id="secondBox">
        <label for="Automerk">Automerk</label>
        <input type="text" name="Automerk" placeholder="Automerk" value="Audi">
        <label for="Type">Type</label>
        <input type="text" name="Type" placeholder="Type" value="RS6">
        <label for="bouwjaar">Bouwjaar</label>
        <input type="text" name="Bouwjaar" placeholder="Bouwjaar" value="2019">
            <div class="next" id="secondNext">Next</div>
    </fieldset>

    <fieldset style="display: none" id="thirdBox">
        <label for="Vakantieland">Favoriete sport</label>
        <input type="text" name="Sport" placeholder="Sport" value="Basketbal">
        <label for="Team">Favoriete team</label>
        <input type="text" name="Team" placeholder="Team" value="Boston Celtics">
        <label for="Favoriete speler">Favoriete speler</label>
        <input type="text" name="Speler" placeholder="Favoriete speler" value="Gordon Hayward">
        <div class="next" id="thirdNext">Next</div>
    </fieldset>

    <fieldset style="display: none" id="fourthBox">
        <label for="Voltooi">Klik hier om in te sturen</label>
        <input type="submit">
    </fieldset>

</form>

Answer 1

There's no such option in jQuery, but there is in jQuery UI. However, the invocation is different, using the .toggle() method (not to be confused with the jQuery one).

$(document).ready(function() {
  $("#firstNext").click(function() {
    $("#firstBox").toggle('slide', function() {
      $("#secondBox").toggle('slide', {
        direction: "right"
      }, function() {
        $(".log").text('You have successfully toggled!');
      });
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<form action="#" method="post">
  <fieldset id="firstBox">
    <label for="naam">Voornaam</label>
    <input type="text" name="naam" placeholder="naam" value="Jan">
    <label for="achternaam">Achternaam</label>
    <input type="text" name="achternaam" placeholder="achternaam" value="de Vries">
    <label for="leeftijd">Leeftijd</label>
    <input type="text" name="leeftijd" placeholder="leeftijd" value="37">
    <div class="next" id="firstNext">Next</div>
  </fieldset>

  <fieldset style="display: none" id="secondBox">
    <label for="Automerk">Automerk</label>
    <input type="text" name="Automerk" placeholder="Automerk" value="Audi">
    <label for="Type">Type</label>
    <input type="text" name="Type" placeholder="Type" value="RS6">
    <label for="bouwjaar">Bouwjaar</label>
    <input type="text" name="Bouwjaar" placeholder="Bouwjaar" value="2019">
    <div class="next" id="secondNext">Next</div>
  </fieldset>

  <fieldset style="display: none" id="thirdBox">
    <label for="Vakantieland">Favoriete sport</label>
    <input type="text" name="Sport" placeholder="Sport" value="Basketbal">
    <label for="Team">Favoriete team</label>
    <input type="text" name="Team" placeholder="Team" value="Boston Celtics">
    <label for="Favoriete speler">Favoriete speler</label>
    <input type="text" name="Speler" placeholder="Favoriete speler" value="Gordon Hayward">
    <div class="next" id="thirdNext">Next</div>
  </fieldset>

  <fieldset style="display: none" id="fourthBox">
    <label for="Voltooi">Klik hier om in te sturen</label>
    <input type="submit">
  </fieldset>
</form>

<div class="log"></div>