In javascript there is a jQuery slideToggle() Method that toggles up-down but i want it to toggles left-right.
I found a code from here and then i copied and pasted and edited it in this way:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

$('.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;
   margin-top: 30px; /* Added to dont overlap result box */
   width: 50px;
   height: 30px;
   text-align: center;
   background: #ccc;
   border: 1px solid #333; 

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


  <div class="nav">Nav</div>
  <div class="text">
       This is the paragraph to end all paragraphs.  You
       should feel <em>lucky</em> to have seen such a paragraph in
       your life.  Congratulations!

But it doesn't work. The box won't be toggeled, it doesn't move at all. Where is the problem?

Member Avatar

you are binding your event before the element is rendered on the page.

either put your script tags at the bottom of the page or wrap everying like this:

    //place code in here

This will cause your code to execute after the dom content is ready.

Yes, it works now. Thank you @stbuchok.