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?

2 Years
Discussion Span
Last Post by Niloofar24

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.