-1

Hello.
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:

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

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

</script>

<style>

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;
   }

</style>
</head>

<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>
</html>

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

2
Contributors
2
Replies
15
Views
2 Years
Discussion Span
Last Post by Niloofar24
1

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:

$(function(){
    //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.