как разместить кнопку сбоку, когда скрытая боковая панель видна

Question

Я пытаюсь анимировать, используя боковую панель, которая анимируется в окне просмотра с помощью кнопки.

это то, как это выглядит при загрузке

и когда пользователь нажимает на любую из двух кнопок, панель заметок будет скользить видимой, как это

здесьэто то, что у меня есть

[3]: https://codepen.io/terenceting/pen/ZqaOJo

Может кто-нибудь мне помочь.и как называется эта функция?

заранее спасибо

Answer 1

Посмотрите на это .. дайте мне знать, если это то, что вы ожидаете

https://codepen.io/aflyzer/pen/JmORyG

просто используйте toggleClass и немного CSS

Answer 2

перед чем-нибудь подсказками об этом коде.
Структура HTML : посмотрите, что "slideDivs" содержит все необходимые компоненты, я использую границы и цвета для лучшей перспективы.
JQuery: он использует состояние "onoffBtn", чтобы знать, открыт блок или нет.Как я уже говорил в коде, это лучше с функцией, которая делает это за 1 шаг меньше кода, но Snipped не любит функции с jquery xD.
Импортируемые части CSS :

#slideDivs{
  right: 0;
  top: 10px;/*Change it if you need*/
  position: absolute;
}
.comp{
  display:inline-block;
}
.tabs{
  width: 440px;
  float: right;
  height: 11em;
}
.tabs{/*All tabs divs must be "display: none"*/
  display: none;
}
#btnTabs{
  width:40px;
  height:180px;
}
.btnTab{
  transform: rotate(-90deg); /* this rotate the btn text, rest are for other explorers (firefox, IE..)*/
  -webkit-transform: rotate(-90deg);   
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  float:left;
  height: 40px;
  width: 40px;
}
.btnTab:nth-child(2){
  margin-top:2px;
}

Надеюсь, что это может помочь вам, вот (https://codepen.io/Alvargon/pen/QZaNmL) код в codePen с некоторыми улучшениями, удачи;)

/*The "optimal way", is use a function, but the code Snippet doesn't like it XD;
*/
var onOffBtn1 = "off";
var onOffBtn2 = "off";
var exnum = 0;
var num = 0;

$("#btn1").click(function(){
    num = 1;
    switch(onOffBtn1){
      case "off": {
        $("#tab"+exnum).hide("fast"); 
        $("#tab"+num).show("fast");
        onOffBtn2="off"; onOffBtn1="on"; 
        exnum = 1;
        break;
      }
      case "on": {
        $("#tab"+num).hide("fast");
        $("#tab"+exnum).hide("fast");
        onOffBtn2="off"; onOffBtn1="off"; break;
      }
    }    
  });

$("#btn2").click(function(){
    num = 2;
    switch(onOffBtn2){
      case "off": {
        $("#tab"+exnum).hide("fast"); 
        $("#tab"+num).show("fast");
        onOffBtn1="off";onOffBtn2="on"; 
        exnum = 2;
        break;
      }
      case "on": {
        $("#tab"+num).hide("fast");
        $("#tab"+exnum).hide("fast");
        onOffBtn2="off";onOffBtn1="off"; break;
      }
    }    
  });

#mainDiv{
  border: 1px solid red;
  padding: 10px;
}

#slideDivs{
  background-color:#add8e680;
  border: 4px dotted blue;
  /*width: 500px;*/
  right: 0;
  top: 10px;
  position: absolute;
}
.comp{
  display:inline-block;
}
.tabs{
  border: 3px double orange;
  width: 440px;
  float: right;
  height: 11em;
}
.tabs{
  display: none;
}
#btnTabs{
  width:40px;
  height:180px;
  border: 3px solid darkgreen;
}
.btnTab{
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);   
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  float:left;
  height: 40px;
  width: 40px;
}
.btnTab:nth-child(2){
  margin-top:2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mainDiv">
  Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu Tururu
  <div id="slideDivs">
    <div id="btnTabs" class="comp">
      <button id="btn1" class="btnTab">BTN 1</button>
      <button id="btn2" class="btnTab">BTN 2</button>       </div>
    <div id="tab1" class="tabs comp"><strong>TAB 1</strong><p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p></div>
    <div id="tab2" class="tabs comp"><strong>TAB 2</strong><p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p></div>  
  </div>
</div>

Answer 3

Я думаю, это то, что вы ищете, верно?слайд на панели, это может быть достигнуто с помощью CSS и просто некоторые манипуляции с классами на элементе контейнера, попробуйте это:

https://codepen.io/anon/pen/xyPEZx

Я просто переключаю класс под названием activeв элементе note-wrapper в настоящее время нет смысла использовать jquery slide, поскольку css и transiotions могут делать большую часть этого:)