CODEWITHSUNDEEP
jqueryhtmlcss
Mike F
Mike F

Reputation: 309

Toggle is working but why

I create a toggle with the code below. I spend a lot of time trying to get it to work properly and after multiple variations with the css having the elements be displayed and then have the jquery make them disappear then appear on the button click this variation worked. But it doesn't make sense to me as to why it actually works. I am toggling the width and it is changing the display settings. How does that work?

       <head>
     <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
     <style>
       .contact {
         list-style:none;
         display:inline;
         position:relative;
       }
       #contList{
         position:fixed;
         left:3.0%;
         bottom:1.1%;
         padding:0px;
         margin:0px;
         white-space:nowrap;
         display:none;
      }
      #contButton{
        width:2.9%;
        position:fixed;
        bottom:0px;
        left:0px;
      }
    </style>
    <script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
   </head>
   <body>
     <div id='contMenu' class='contMenu'>
        <a id='contButton'>
          <i class="fa fa-globe fa-3x"></i>
        </a>
        <ul id ='contList'>
          <li class='contact'><i class="fa fa-envelope fa-2x"></i></li>
          <li class='contact'><i class="fa fa-twitter fa-2x"></i></li>
       </ul>
     </div>
  <script>
  $(document).ready(init);

  function init(){
    slideToggle();
  }

   function slideToggle(){
    $('#contButton').click(function(){
      $('#contList').animate({width:'toggle'});
    });
   }

 </script>
</body>

This is a working JsFiddle of the code: http://jsfiddle.net/mfedore1/Lf4k9/

Upvotes: 1

Views: 134

Answers (3)

user1967
user1967

Reputation: 91

From https://api.jquery.com/animate/

"In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element. In order to use jQuery's built-in toggle state tracking, the 'toggle' keyword must be consistently given as the value of the property being animated."

I believe jQuery's animate method using the keyword 'toggle' was designed to behave in a particular way. It takes into account the display type of the element.

Speculation: I think jQuery sees animate({widthL 'toggle'}) and 'display: none' and assumes the proper animation should be from width: 0, to the elements actual width and it changes the display property so the animation is visible.

Cheers

Upvotes: 0

Kiran
Kiran

Reputation: 20313

The target value of the width property is 'toggle'. Since the contList was visible before, the animation shrinks the width to 0 to hide it.

From Docs:

In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element. In order to use jQuery's built-in toggle state tracking, the 'toggle' keyword must be consistently given as the value of the property being animated.

https://api.jquery.com/animate/

Upvotes: 1

xate
xate

Reputation: 6379

$(document).ready(init);

On document load, load the function init.

function init(){
    slideToggle();
  }'

load the function slideToggle()

function slideToggle(){
    $('#contButton').click(function(){ // when contButton is clicked, this function starts
      $('#contList').animate({width:'toggle'}); // take #contlist and put width to "toggle-mode"(between 0 and value)
    });
   }

Check this Question out - will help you alot! :)

.animate({ width: 'toggle' }) without messing up the content

Upvotes: 1

Related Questions