JQuery UI - .toogleClass() не работает

Question

Я пытаюсь манипулировать2 divs на моей странице, в основном, когда 1 div является спрятана - в этом примере div "template_class" - еще div расширяется, чтобы заполнить этот пробел, однако в данный момент "template_class" шкуры, но ничего не происходит с другим div, почему

JQuery?:

$(function() { 
    $(".toogle").on("click", function() { 
     $(".template_class").toggleClass("newClass", 1000); 
     $("#content-link2").toggleClass("newClass3", 1000); 
    }); 
    }); 

CSS:

.toogle{ 
    padding:0px 0px 0px 0px; 
    text-align: center; 
    margin:0px; 
    width: 160px; 
    height:40px; 
    top: 100px; 
    background:#FF931E; 
    z-index:15; 
    border-radius: 5px 5px 0px 0px; 
    -moz-transform:rotate(-90deg); 
    -ms-transform:rotate(-90deg); 
    -o-transform:rotate(-90deg); 
    -webkit-transform:rotate(-90deg); 
    transform-origin: bottom right; 
    position: relative; 
    right: 0px; 
} 
.newClass3{ 
    margin-top: 50px; 
    width: 95%; 
    height: 89%; 
    border: 2px solid blue; 
    float: right; 
} 
.newClass{ 
    top:0%; 
    width: 0%; 
    height: 0%; 
} 

HTML:

<div class="container template_class "> 
    @foreach ($templates as $template) 
    <a class="content-link" href="{{ asset($template->file)}}"> 
     <img src="{{ asset($template->image)}}"/> 
     </a> @endforeach 

</div> 
    <div class="pace pace-inactive"> 
    <div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;"> 
     <div class="pace-progress-inner"></div> 
    </div> 
    <div class="pace-activity"></div> 
</div> 
<div class="features form-group"> 
    <input class="form-control filestyle margin images" data-input="false" type="file" data-buttonText="Upload Logo" data-size="sm" data-badge="false" onchange="readURL(this);" /> 

    <script> 
    $(function() { 
    $(document).tooltip(); 
    }); 
    </script> 
    <button style="display: none" class="form-control margin btn btn-primary" id="showColor">Show Colors</button> 
    <button style="display: none" class="form-control margin btn btn-primary" id="hideColor">Hide Colors</button> 
    <input title="Choose a color and then click on any box" style="display: none" class="btn btn-default form-control margin" type="color" id="colorChoice"> 
    <a style="display: none" href="#" class="btn btn-default form-control margin" id="cp4">Background</a> 

    <button style="display: none" onclick="$('#fonts1').bfhfonts({font: 'Arial'})" id="fontsShow" class="btn btn-primary form-control margin">Load Fonts</button> 
    <button style="display: none" class="btn btn-primary form-control margin" id="fontsHide">Hide Fonts</button> 
    <select title="Choose a font and then click on any box" style="display: none" id="fonts1" class="form-control margin"></select> 

    <button style="display: none" onclick="$('#googlefonts1').bfhgooglefonts({font: 'Lato'})" id="googleShow" class="btn btn-primary form-control margin">Google fonts</button> 
    <button style="display: none" class="btn btn-primary form-control margin" id="googleHide">Hide Google</button> 
    <select title="Choose a font and then click on any box" style="display: none" id="googlefonts1" class="form-control margin"></select> 

    <button style="display: none" onclick="$('#fontsizes1').bfhfontsizes({fontsize: '12'})" id="sizeShow" class="btn btn-primary form-control margin">Load font size</button> 
    <button style="display: none" class="btn btn-primary form-control margin" id="sizeHide">Hide font size</button> 
    <select title="Choose a font size and then click on any box" style="display: none" id="fontsizes1" class="form-control margin"></select> 

    <button style="display: none" class="form-control margin btn btn-default" id="finishEdit">Done</button> 
    <button class="form-control margin btn btn-default" id="startEdit">Edit</button> 

    <input type="hidden" name="_token" value="{{ csrf_token() }}"> 
    <button onClick=" updateDatabase(this);" type="button" class="form-control margin btn btn-warning" id="getRequest">Save</button> 
</div> 
<div id="content-link2"> 
     <button class="form-control btn btn-success toogle" ></button> 
</div> 

Answer 1

Сначала я думаю, что вы используете функцию .togleClass() неправильно. В вашем случае он равен .toggleClass("classname", true), который может только добавить класс к элементу, а не переключать его (source).

Кроме этого, я считаю, что ваш CSS немного очевиден. Лучше сделать так:

.newClass{ 
    display: none; 
} 

Что касается других разделов, они должны автоматически подниматься. Я не знаю, первоначальный стиль #content-link2, поэтому уточнение помогло бы о том, почему вы должны сделать его плавать прямо и т.д.