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

Question

My slide toggle will not show up? I have made it so when you press on the id click, then will text id appear. but somehow it doesn't connect? It seems that text id is behind all the time, but I can't get it down? and I'm also wondering how I can make it toggle to the side instead of down?

Can someone help here? Thanks

$(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

I found the issue. It's because #introduction_click didn't closed and contained whole container. So I added </div> before #Toggle2_click. It works now.

$(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>