Member Avatar for Niloofar24

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
  • 377 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by Niloofar24
Member Avatar for stbuchok

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.

Member Avatar for Niloofar24

Yes, it works now. Thank you @stbuchok.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.