CODEWITHSUNDEEP
javascripthtmlcss
hannacreed
hannacreed

Reputation: 649

How to toggle different divs

Current Outcome Each of my labels are controlling only the first box, rather than controlling the box that they reside in.

Desired Outcome Make each button only trigger the content within the same div rather than controlling the content in the first div.

I also don't want to have a bunch of different ids, so is there an easier way to do this with javascript?

Question So how do I make the first button only control the box it is in, and the second button only control the box it is in too?

body {
  background: #CCC;
  font-family: 'Varela Round', sans-serif;
}

#collapse {
  color: #fff;
  background: #494949;
  border-radius: 10px;
  width: 300px;
  margin: 20px auto;
  padding: 10px 0;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

h2 {
  text-align: center;
}

p {
  font-size: 13px;
}

input {
  display: none;
  visibility: hidden;
}

label {
  width: 90px;
  margin: 0 auto;
  margin-bottom: 5px;
  display: block;
  text-align: center;
  color: #fff;
  background-color: #4ada95;
  border-radius: 5px;
}

label:hover {
  color: #494949;
}

label::before {}

#expand {
  height: 225px;
  overflow: hidden;
  transition: height 0.5s;
  background-color: #4ada95;
  color: #FFF;
  width: 250px;
  margin: 0 auto;
  text-align: center;
  border-radius: 10px;
}

li {
  list-style-type: none;
  padding: 10px;
  margin: 0 auto;
}

section {
  padding: 0 20px;
}

#toggle:checked~#expand {
  height: 0px;
}

#toggle:checked~label::before {
  display: hidden;
}
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
  <link href="collapse.css" rel="stylesheet">
</head>

<body>
  <main>
    <div id="collapse">
      <h2>Icon Quiz</h2>
      <input id="toggle" type="checkbox" checked>
      <label for="toggle">take quiz</label>
      <div id="expand">
        <section>
          <h3>which icon is used for GitHub?</h3>
          <li><i class="fa fa-gitlab" aria-hidden="true"></i></li>
          <li><i class="fa fa-grav fa-lg" aria-hidden="true"></i></li>
          <li><i class="fa fa-github-alt fa-lg" aria-hidden="true"></i></li>
        </section>
      </div>
    </div>
    <div id="collapse">
      <h2>Another Quiz</h2>
      <input id="toggle" type="checkbox" checked>
      <label for="toggle">take quiz</label>
      <div id="expand">
        <section>
          <h3>test?</h3>
          <li>blah</li>
          <li>blah</li>
          <li>blah</li>
        </section>
      </div>
    </div>
  </main>
</body>

</html>

Upvotes: 2

Views: 112

Answers (1)

wrayvon
wrayvon

Reputation: 2510

You need to have unique IDs. IDs should only ever be used once.

body {
  background: #CCC;
  font-family: 'Varela Round', sans-serif;
}

#collapse {
  color: #fff;
  background: #494949;
  border-radius: 10px;
  width: 300px;
  margin: 20px auto;
  padding: 10px 0;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

h2 {
  text-align: center;
}

p {
  font-size: 13px;
}

input {
  display: none;
  visibility: hidden;
}

label {
  width: 90px;
  margin: 0 auto;
  margin-bottom: 5px;
  display: block;
  text-align: center;
  color: #fff;
  background-color: #4ada95;
  border-radius: 5px;
}

label:hover {
  color: #494949;
}

label::before {}

#expand,
#expand2{
  height: 225px;
  overflow: hidden;
  transition: height 0.5s;
  background-color: #4ada95;
  color: #FFF;
  width: 250px;
  margin: 0 auto;
  text-align: center;
  border-radius: 10px;
}

li {
  list-style-type: none;
  padding: 10px;
  margin: 0 auto;
}

section {
  padding: 0 20px;
}

#toggle:checked~#expand {
  height: 0px;
}

#toggle:checked~label::before {
  display: hidden;
}

#toggle2:checked~#expand2 {
  height: 0px;
}

#toggle2:checked~label::before {
  display: hidden;
}
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
  <link href="collapse.css" rel="stylesheet">
</head>

<body>
  <main>
    <div id="collapse">
      <h2>Icon Quiz</h2>
      <input id="toggle" type="checkbox" checked>
      <label for="toggle">take quiz</label>
      <div id="expand">
        <section>
          <h3>which icon is used for GitHub?</h3>
          <li><i class="fa fa-gitlab" aria-hidden="true"></i></li>
          <li><i class="fa fa-grav fa-lg" aria-hidden="true"></i></li>
          <li><i class="fa fa-github-alt fa-lg" aria-hidden="true"></i></li>
        </section>
      </div>
    </div>
    <div id="collapse">
      <h2>Another Quiz</h2>
      <input id="toggle2" type="checkbox" checked>
      <label for="toggle2">take quiz</label>
      <div id="expand2">
        <section>
          <h3>test?</h3>
          <li>blah</li>
          <li>blah</li>
          <li>blah</li>
        </section>
      </div>
    </div>
  </main>
</body>

</html>

Upvotes: 2

Related Questions