jquery slideToggle direction

Asked 2/7, 2011 at 7:49 Answered 15/6, 2013 at 5:1

I am trying to slide jquery .slideToggle but i am not able to add direction left to right or right to left on click of a div (nav). Please help me out, below is my code.

    <!DOCTYPE html>

<html>

<head>

  <style>

  p { width:400px; float:right;background:#e4e4e4; margin:5px;padding:5px;}

  </style>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body style="font-size:10px; color:#333;">

  <div style="width:50px; height:15px;float:right;background:#ccc;border:1px solid #333;text-align:center;">Nav</div>



  <p>

    This is the paragraph to end all paragraphs.  You

    should feel <em>lucky</em> to have seen such a paragraph in

    your life.  Congratulations!

  </p>

<script>

    $("div").click(function () {

      $("p").slideToggle("slow");


    });

</script>



</body>

I am new to jquery, help much appreciated.

Savannasavannah answered 2/7, 2011 at 7:49 Comment(1)

The default behaviour of slideToggle is to slide up or slide down. Do you want your <p> to slide left and slide right ? – Lowe 2/7, 2011 at 7:59

You need to add a parent to the text.

$('.nav').click(function() {
   $('.text p').css({
      'width': $('.text p').width(),
      'height': $('.text p').height()
   });
   $('.text').animate({
      'width': 'toggle'
   });
});

body {
   font-size: 10px;
   color: #333;
}

.nav {
   float: right;
   width: 50px;
   line-height: 38px;
   text-align: center;
   background: #ccc;
   border: 1px solid #333;
   cursor: pointer;
}

.text {
   overflow: hidden;
   float: right;
   margin: 0 5px;
   padding: 5px;
   background: #e4e4e4;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
   <div class="nav">Nav</div>
   <div class="text">
      <p>
         This is the paragraph to end all paragraphs. You
         should feel <em>lucky</em> to have seen such a paragraph in
         your life. Congratulations!
      </p>
   </div>
</body>

You have a demo at: http://jsfiddle.net/o6rj51bm/

Paff answered 15/6, 2013 at 5:1 Comment(0)

The default behaviour of slideToggle in jquery is to "slide up" or "slide down". If you want your <p> to "slide left" and "slide right", you could use the 'slide' effect available in jquery ui. The direction argument accepts 'up','down','left','right' as valid values. http://docs.jquery.com/UI/Effects/Slide

Lowe answered 2/7, 2011 at 8:8 Comment(0)

You could do this:

p { width:400px; position: absolute; background:#e4e4e4; margin:5px;padding:5px;}

(use position absolute instead of float right)

And this:

 $(document).ready(function() {
    var $elem = $("p");           
    var docwidth =  $(document).width();
    var inileft = docwidth - $elem.outerWidth();
    $elem.css("left", inileft);  //Position element tho the right
    $("div").click(function () {  //This slides
      $elem.animate({
        left: (parseInt($elem.css("left"), 10) >= docwidth ?  inileft : docwidth)
      });
   });
 });

By using animate, you can do very custom animations. Hope this helps. Cheers

Reviewer answered 2/7, 2011 at 8:42 Comment(1)

Thanks a ton for quick reply but this is not working :( see the below link jsfiddle.net/sanketrajdeora/CJLT3 – Savannasavannah 3/7, 2011 at 5:45

-5

<script>

    $("div").click(function () {

      $("p").slideToggle("slow", {direction: "left"}, 100);


    });

</script>

Brittan answered 16/4, 2013 at 9:48 Comment(1)

You need jQuery UI for this to work: api.jqueryui.com/slide-effect/?rdfrom=http://docs.jquery.com/mw/… – Lydie 28/8, 2023 at 17:50

Recommended topics

Hot tags