Как увеличить ширину выдвижения

Question

Я хочу изменить, как далеко эта панель выйдет в этом jsfiddle. Для этого я использовал код jsfiddle. В этом случае, если я изменю ширину слайда и левую настройку закрытия до 200 вместо 100, ширина увеличивается и работает нормально. Но если я сделаю то же самое в своей, панель исчезнет. Я предполагаю, что я не изменил что-то правильно при преобразовании его в левую сторону. Может ли кто-нибудь объяснить, как увеличить ширину, чтобы панель скользнула дальше?

<style> 
    div#slideit {position: fixed; top: 100px; left:0px; margin: 0px; padding: 20px 0px 0px; color:#fff; background:#5681b4; list-style: none; z-index:9999; width: 100px; border-radius:0px 30px 30px 5px} 
    div#slideit .slideit-btn {background:#5681b4; border-radius:0px 10px 10px 0px; position:absolute; top:10px; left:90px; width:40px; height:70px; display:block; cursor:pointer;} 
    div#slideit .slideitspan {width:100px; margin:4px 2px; text-align:center; text-decoration:none; color:#FFF;} 
    .vertical-text { 
    font-size:18px; 
    transform: rotate(90deg); 
    transform-origin: left top 0; 
    position:absolute; top: 10px; left:34px; 
    } 
    </style> 

    <div id="slideit"> 
    <div class="slideit-btn"> <span class="vertical-text"></span></div> 
    <div class="slideitspan">You can now easily create banners, configure them as you like, link them to anywhere you want, like to products, categories, any page of your store or any other website and display them on various areas of your store, for example the front page. Learn more on the mini template system usage page </div> 
    </div> 

    <script> 
    $(function() { 
    $.fn.ToggleSlide = function() { 
     return this.each(function() { 
      //$(this).css('position', 'absolute'); 

      if(parseInt($(this).css('left')) < 0) { 
       $(this).animate({ 'left' : '0px' }, 120, function() { 
       $(".vertical-text").text("Close"); 
        //$(this).css('position', 'relative'); 
       }); 
      } 
      else { 
       $(this).animate({ 'left' : '-100px' }, 120, function() { 
       $(".vertical-text").text("Open"); 
        //$(this).css('position', 'relative'); 
       }); 
      } 
     }); 
    }; 

    $('#slideit').ToggleSlide(); 

    $(".slideit-btn").bind("click", function() { 
     $('#slideit').ToggleSlide(); 
    }); 
    }); 
    </script> 

Answer 1

Очень прямолинейный. Увеличение ширины HTML элементов

*{box-sizing: border-box;} 
#slideit, #slideit .slideitspan{width:300px;} 
#slideit .slideitspan{padding: 30px;} 
#slideit .slideit-btn{left: initial; right: -32px;} 

, а затем настроить смещение применяется JS на ту же сумму:

$(this).animate({ 'left' : '-300px' }, 120, function() {... 

https://jsfiddle.net/2c7rzm3q/