为什么我的切换不显示？以及如何切换到一边？

Question

我的滑动开关不显示？我已经做到了，当你点击 id 时，文本 id 就会出现。但不知何故它没有连接？好像text id一直在后面，但是我怎么也拿不下来？我也想知道如何让它切换到侧面而不是向下？

有人可以帮忙吗？谢谢

$(document).ready(function() {
  $("#Introduction_click").click(function() {
    $("#Introduction_text").slideToggle("slow")
  })
  
  $("#Toggle2_click").click(function() {
    $("#Toggle2_text").slideToggle("slow")
  })
})

.container {
  padding-left: 00px;
  padding-bottom: 55px;
  box-sizing: border-box;
  cursor: pointer;
  background-color: yellow;
}

.title {
  padding-top: 20px;
  font-family: 'RimaRegular';
  font-weight: 800;
  font-style: normal;
  font-size: 18px;
  line-height: 21.5px;
  background-color: blue;
  border-radius: 25px;
  /*  margin-top:10px;*/
  margin-top: 5px;
  margin-right: 5vw;
  height: 100%;
}

h1 {
  font-family: 'Till-Normal';
  font-weight: 900;
  font-style: normal;
  font-size: 30px;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-align: center;
}

.paragraph {
  margin-right: 10vw;
}

p {
  /*  margin-left:30px;*/
  margin-left: 20px;
  /* text-indent: 30px; */
  font-family: 'RimaRegular';
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  line-height: 20.5px;
  -webkit-font-smoothing: antialiased;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  /*  text-align: justify;*/
  text-justify: inter-word;
  overflow-wrap: break-word;
}

#Introduction_click {
  height: 100%;
  margin-left: 0vw;
  margin-top: 10px;
}

#Introduction_text {
  display: none;
  margin-top: 0px;
}

#Toggle2_click {
  height: 100%;
  margin-left: 0vw;
  margin-top: 10px;
}

#Toggle2_text {
  display: none;
  margin-top: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">


  <div id="Introduction_click">
    <div class="title">
      <h1>Introduction</h1>
      <br>
      <div id="Introduction_text">
        <div class="paragraph">
          <br>
          <p>hallo text here</p>
        </div>
      </div>
    </div>

    <div id="Toggle2_click">
      <div class="title">
        <h1>Toggle 2</h1>
        <br>
        <div id="Toggle2_text">
          <div class="paragraph">
            <br>
            <p>hallo text here</p>
          </div>
        </div>
      </div>

Answer 1

我发现了问题。这是因为 #introduction_click 没有关闭并包含整个容器。所以我在#Toggle2_click之前添加了</div>。现在可以使用了。

$(document).ready(function() {
  $("#Introduction_click").click(function() {
    $("#Introduction_text").slideToggle("slow");
  });
});

$(document).ready(function() {
  $("#Toggle2_click").click(function() {
    $("#Toggle2_text").slideToggle("slow");
  });
});

.container {
  padding-left: 00px;
  padding-bottom: 55px;
  box-sizing: border-box;
  cursor: pointer;
  background-color: yellow;
}

.title {
  padding-top: 20px;
  font-family: 'RimaRegular';
  font-weight: 800;
  font-style: normal;
  font-size: 18px;
  line-height: 21.5px;
  background-color: blue;
  border-radius: 25px;
  /*  margin-top:10px;*/
  margin-top: 5px;
  margin-right: 5vw;
  height: 100%;
}

h1 {
  font-family: 'Till-Normal';
  font-weight: 900;
  font-style: normal;
  font-size: 30px;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-align: center;
}

.paragraph {
  margin-right: 10vw;
}

p {
  /*  margin-left:30px;*/
  margin-left: 20px;
  /* text-indent: 30px; */
  font-family: 'RimaRegular';
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  line-height: 20.5px;
  -webkit-font-smoothing: antialiased;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  /*  text-align: justify;*/
  text-justify: inter-word;
  overflow-wrap: break-word;
}

#Introduction_click {
  margin-left: 0vw;
  margin-top: 10px;
}

#Introduction_text {
  display: none;
  margin-top: 0px;
}

#Toggle2_click {
  height: 100%;
  margin-left: 0vw;
  margin-top: 10px;
}

#Toggle2_text {
  display: none;
  margin-top: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">


  <div id="Introduction_click">
    <div class="title">
      <h1>Introduction</h1>
      <br>
      <div id="Introduction_text">
        <div class="paragraph">
          <br>
          <p>hallo text here</p>
        </div>
      </div>
    </div>
    </div>

    <div id="Toggle2_click">
      <div class="title">
        <h1>Toggle 2</h1>
        <br>
        <div id="Toggle2_text">
          <div class="paragraph">
            <br>
            <p>hallo text here</p>
          </div>
        </div>
      </div>

Answer 2

我想你忘了添加Jquery库在你的脚本点击事件之前添加这个

 <script src="https://code.jquery.com/jquery-3.5.0.js"></script>

为什么我的切换不显示？以及如何切换到一边？

Why does my toggle do not show up? and how to toggle to the side?

html

javascript

css

slidetoggle