Show/hide multiple popup when clicked





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







1















I have created a Pen on Show/hide multiple popup : https://codepen.io/Volabos/pen/BGdBKw



As you see, here we have 3 sections for 2016, 2017, and 2018. The goal is when user clicks on them different windows will slip-up displaying different information.



My implementation works fine for 2016. In that case, a Pop-up window showing PART 01 will open. However, for 2017, I have implemented just same logic, but failed to show PART 02.



Could someone point me exactly what went wrong for 2017?






var toggle = document.getElementById('toggle_Y1');

var slider = document.querySelector('.slider_Y1');

var toggle1 = document.getElementById('toggle_Y11');





toggle.addEventListener('click', toggleSlider, false);

toggle1.addEventListener('click', toggleSlider, false);





function toggleSlider() {

  if (slider.classList.contains('opened_Y1')) {

    slider.classList.remove('opened_Y1');

    slider.classList.add('closed_Y1');

  } else {

    slider.classList.remove('closed_Y1');

    slider.classList.add('opened_Y1');



  }

}





var toggle_2 = document.getElementById('toggle_Y2');

var slider_2 = document.querySelector('.slider_Y2');

var toggle1_2 = document.getElementById('toggle_Y21');





toggle_2.addEventListener('click', toggleSlider_2, false);

toggle1_2.addEventListener('click', toggleSlider_2, false);





function toggleSlider_2() {

  if (slider_2.classList.contains('opened_Y2')) {

    slider_2.classList.remove('opened_Y2');

    slider_2.classList.add('closed_Y2');

  } else {

    slider_2.classList.remove('closed_Y2');

    slider_2.classList.add('opened_Y2');



  }

}

.content_EQ_Announcement_Y {

  margin: 0 auto;

  padding: 10px 0 10px 0;

  width: 33.2%;

  height: 300px;

  display: inline-block;

  float: left;

  border-right: 1px solid #e5e5e5;

  background: rgba(0, 0, 0, .0);

  text-align: center;

  cursor: pointer;

}



.Y1 {

  border-right: 0px solid #e5e5e5;

}



.EQ_Announcement_Y1 {

  overflow: hidden;

  position: absolute;

  height: 292px;

  width: 100%;

  background: rgba(0, 0, 0, .0);

  margin-top: 4px;

}



.slider_Y1,

.slider_Y2 {

  height: 100%;

  width: 100%;

  background: rgba(0, 0, 0, .0);

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  -ms-box-sizing: border-box;

  box-sizing: border-box;

  padding: 0px;

  border: 1px solid #cccccc;

  z-index: 200;

  -webkit-transition: -webkit-transform .3s ease;

  -moz-transition: -moz-transform .3s ease;

  -ms-transition: -ms-transform .3s ease;

  transition: transform .3s ease;

}



.slider_Y1.opened_Y1,

.slider_Y2.opened_Y2 {

  -webkit-transform: translate(0, 0%);

  -moz-transform: translate(0, 0%);

  -ms-transform: translate(0, 0%);

  transform: translate(0, 0%);

  background: #fff;

}



.slider_Y1.closed_Y1,

.slider_Y2.closed_Y2 {

  -webkit-transform: translate(0, 100%);

  -moz-transform: translate(0, 100%);

  -ms-transform: translate(0, 100%);

  transform: translate(0, 100%);

}



#toggle_Y11,

#toggle_Y21 {

  margin: 0;

  padding: 0;

  background: rgba(0, 0, 0, .0);

  width: 100%;

  height: 100%;

  text-align: left;

  position: absolute;

}

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>





<div class="EQ_Announcement_Y1">

  <div class='content_EQ_Announcement_Y'>

    <div id='toggle_Y1'>2016</div>

  </div>

  <div class='content_EQ_Announcement_Y'>

    <div id='toggle_Y2'>2017</div>

  </div>

  <div class='content_EQ_Announcement_Y'>

    <div id='toggle_Y3'>2018</div>

  </div>



  <div class="slider_Y1 closed_Y1">

    <div id='toggle_Y11'>

      PART 01

    </div>

  </div>

  <div class="slider_Y2 closed_Y2">

    <div id='toggle_Y21'>

      PART 02

    </div>

  </div>

</div>








javascript html css







share|improve this question

























  • In the future, please include your code in the question itself. I've edited your question to include it as a runnable snippet.

    – Tyler Roper
    Nov 16 '18 at 18:10











  • So I switched the order of your HTML and the part 2 appears, the part 1 does not. The first slider is stacked on top of the other slider, so its blocking its ability to come into the fold. My recommendation would be to place your sliders within a parent div. Instead of sliding up the individual slides, slide up the container but still do the transformations on the specific element you want to show.

    – thefromanguard
    Nov 16 '18 at 18:33




















1















I have created a Pen on Show/hide multiple popup : https://codepen.io/Volabos/pen/BGdBKw



As you see, here we have 3 sections for 2016, 2017, and 2018. The goal is when user clicks on them different windows will slip-up displaying different information.



My implementation works fine for 2016. In that case, a Pop-up window showing PART 01 will open. However, for 2017, I have implemented just same logic, but failed to show PART 02.



Could someone point me exactly what went wrong for 2017?






var toggle = document.getElementById('toggle_Y1');

var slider = document.querySelector('.slider_Y1');

var toggle1 = document.getElementById('toggle_Y11');





toggle.addEventListener('click', toggleSlider, false);

toggle1.addEventListener('click', toggleSlider, false);





function toggleSlider() {

  if (slider.classList.contains('opened_Y1')) {

    slider.classList.remove('opened_Y1');

    slider.classList.add('closed_Y1');

  } else {

    slider.classList.remove('closed_Y1');

    slider.classList.add('opened_Y1');



  }

}





var toggle_2 = document.getElementById('toggle_Y2');

var slider_2 = document.querySelector('.slider_Y2');

var toggle1_2 = document.getElementById('toggle_Y21');





toggle_2.addEventListener('click', toggleSlider_2, false);

toggle1_2.addEventListener('click', toggleSlider_2, false);





function toggleSlider_2() {

  if (slider_2.classList.contains('opened_Y2')) {

    slider_2.classList.remove('opened_Y2');

    slider_2.classList.add('closed_Y2');

  } else {

    slider_2.classList.remove('closed_Y2');

    slider_2.classList.add('opened_Y2');



  }

}

.content_EQ_Announcement_Y {

  margin: 0 auto;

  padding: 10px 0 10px 0;

  width: 33.2%;

  height: 300px;

  display: inline-block;

  float: left;

  border-right: 1px solid #e5e5e5;

  background: rgba(0, 0, 0, .0);

  text-align: center;

  cursor: pointer;

}



.Y1 {

  border-right: 0px solid #e5e5e5;

}



.EQ_Announcement_Y1 {

  overflow: hidden;

  position: absolute;

  height: 292px;

  width: 100%;

  background: rgba(0, 0, 0, .0);

  margin-top: 4px;

}



.slider_Y1,

.slider_Y2 {

  height: 100%;

  width: 100%;

  background: rgba(0, 0, 0, .0);

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  -ms-box-sizing: border-box;

  box-sizing: border-box;

  padding: 0px;

  border: 1px solid #cccccc;

  z-index: 200;

  -webkit-transition: -webkit-transform .3s ease;

  -moz-transition: -moz-transform .3s ease;

  -ms-transition: -ms-transform .3s ease;

  transition: transform .3s ease;

}



.slider_Y1.opened_Y1,

.slider_Y2.opened_Y2 {

  -webkit-transform: translate(0, 0%);

  -moz-transform: translate(0, 0%);

  -ms-transform: translate(0, 0%);

  transform: translate(0, 0%);

  background: #fff;

}



.slider_Y1.closed_Y1,

.slider_Y2.closed_Y2 {

  -webkit-transform: translate(0, 100%);

  -moz-transform: translate(0, 100%);

  -ms-transform: translate(0, 100%);

  transform: translate(0, 100%);

}



#toggle_Y11,

#toggle_Y21 {

  margin: 0;

  padding: 0;

  background: rgba(0, 0, 0, .0);

  width: 100%;

  height: 100%;

  text-align: left;

  position: absolute;

}

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>





<div class="EQ_Announcement_Y1">

  <div class='content_EQ_Announcement_Y'>

    <div id='toggle_Y1'>2016</div>

  </div>

  <div class='content_EQ_Announcement_Y'>

    <div id='toggle_Y2'>2017</div>

  </div>

  <div class='content_EQ_Announcement_Y'>

    <div id='toggle_Y3'>2018</div>

  </div>



  <div class="slider_Y1 closed_Y1">

    <div id='toggle_Y11'>

      PART 01

    </div>

  </div>

  <div class="slider_Y2 closed_Y2">

    <div id='toggle_Y21'>

      PART 02

    </div>

  </div>

</div>








javascript html css







share|improve this question

























  • In the future, please include your code in the question itself. I've edited your question to include it as a runnable snippet.

    – Tyler Roper
    Nov 16 '18 at 18:10











  • So I switched the order of your HTML and the part 2 appears, the part 1 does not. The first slider is stacked on top of the other slider, so its blocking its ability to come into the fold. My recommendation would be to place your sliders within a parent div. Instead of sliding up the individual slides, slide up the container but still do the transformations on the specific element you want to show.

    – thefromanguard
    Nov 16 '18 at 18:33
















1












1








1








I have created a Pen on Show/hide multiple popup : https://codepen.io/Volabos/pen/BGdBKw



As you see, here we have 3 sections for 2016, 2017, and 2018. The goal is when user clicks on them different windows will slip-up displaying different information.



My implementation works fine for 2016. In that case, a Pop-up window showing PART 01 will open. However, for 2017, I have implemented just same logic, but failed to show PART 02.



Could someone point me exactly what went wrong for 2017?






var toggle = document.getElementById('toggle_Y1');

var slider = document.querySelector('.slider_Y1');

var toggle1 = document.getElementById('toggle_Y11');





toggle.addEventListener('click', toggleSlider, false);

toggle1.addEventListener('click', toggleSlider, false);





function toggleSlider() {

  if (slider.classList.contains('opened_Y1')) {

    slider.classList.remove('opened_Y1');

    slider.classList.add('closed_Y1');

  } else {

    slider.classList.remove('closed_Y1');

    slider.classList.add('opened_Y1');



  }

}





var toggle_2 = document.getElementById('toggle_Y2');

var slider_2 = document.querySelector('.slider_Y2');

var toggle1_2 = document.getElementById('toggle_Y21');





toggle_2.addEventListener('click', toggleSlider_2, false);

toggle1_2.addEventListener('click', toggleSlider_2, false);





function toggleSlider_2() {

  if (slider_2.classList.contains('opened_Y2')) {

    slider_2.classList.remove('opened_Y2');

    slider_2.classList.add('closed_Y2');

  } else {

    slider_2.classList.remove('closed_Y2');

    slider_2.classList.add('opened_Y2');



  }

}

.content_EQ_Announcement_Y {

  margin: 0 auto;

  padding: 10px 0 10px 0;

  width: 33.2%;

  height: 300px;

  display: inline-block;

  float: left;

  border-right: 1px solid #e5e5e5;

  background: rgba(0, 0, 0, .0);

  text-align: center;

  cursor: pointer;

}



.Y1 {

  border-right: 0px solid #e5e5e5;

}



.EQ_Announcement_Y1 {

  overflow: hidden;

  position: absolute;

  height: 292px;

  width: 100%;

  background: rgba(0, 0, 0, .0);

  margin-top: 4px;

}



.slider_Y1,

.slider_Y2 {

  height: 100%;

  width: 100%;

  background: rgba(0, 0, 0, .0);

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  -ms-box-sizing: border-box;

  box-sizing: border-box;

  padding: 0px;

  border: 1px solid #cccccc;

  z-index: 200;

  -webkit-transition: -webkit-transform .3s ease;

  -moz-transition: -moz-transform .3s ease;

  -ms-transition: -ms-transform .3s ease;

  transition: transform .3s ease;

}



.slider_Y1.opened_Y1,

.slider_Y2.opened_Y2 {

  -webkit-transform: translate(0, 0%);

  -moz-transform: translate(0, 0%);

  -ms-transform: translate(0, 0%);

  transform: translate(0, 0%);

  background: #fff;

}



.slider_Y1.closed_Y1,

.slider_Y2.closed_Y2 {

  -webkit-transform: translate(0, 100%);

  -moz-transform: translate(0, 100%);

  -ms-transform: translate(0, 100%);

  transform: translate(0, 100%);

}



#toggle_Y11,

#toggle_Y21 {

  margin: 0;

  padding: 0;

  background: rgba(0, 0, 0, .0);

  width: 100%;

  height: 100%;

  text-align: left;

  position: absolute;

}

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>





<div class="EQ_Announcement_Y1">

  <div class='content_EQ_Announcement_Y'>

    <div id='toggle_Y1'>2016</div>

  </div>

  <div class='content_EQ_Announcement_Y'>

    <div id='toggle_Y2'>2017</div>

  </div>

  <div class='content_EQ_Announcement_Y'>

    <div id='toggle_Y3'>2018</div>

  </div>



  <div class="slider_Y1 closed_Y1">

    <div id='toggle_Y11'>

      PART 01

    </div>

  </div>

  <div class="slider_Y2 closed_Y2">

    <div id='toggle_Y21'>

      PART 02

    </div>

  </div>

</div>








javascript html css







share|improve this question
















I have created a Pen on Show/hide multiple popup : https://codepen.io/Volabos/pen/BGdBKw



As you see, here we have 3 sections for 2016, 2017, and 2018. The goal is when user clicks on them different windows will slip-up displaying different information.



My implementation works fine for 2016. In that case, a Pop-up window showing PART 01 will open. However, for 2017, I have implemented just same logic, but failed to show PART 02.



Could someone point me exactly what went wrong for 2017?






var toggle = document.getElementById('toggle_Y1');

var slider = document.querySelector('.slider_Y1');

var toggle1 = document.getElementById('toggle_Y11');





toggle.addEventListener('click', toggleSlider, false);

toggle1.addEventListener('click', toggleSlider, false);





function toggleSlider() {

  if (slider.classList.contains('opened_Y1')) {

    slider.classList.remove('opened_Y1');

    slider.classList.add('closed_Y1');

  } else {

    slider.classList.remove('closed_Y1');

    slider.classList.add('opened_Y1');



  }

}





var toggle_2 = document.getElementById('toggle_Y2');

var slider_2 = document.querySelector('.slider_Y2');

var toggle1_2 = document.getElementById('toggle_Y21');





toggle_2.addEventListener('click', toggleSlider_2, false);

toggle1_2.addEventListener('click', toggleSlider_2, false);





function toggleSlider_2() {

  if (slider_2.classList.contains('opened_Y2')) {

    slider_2.classList.remove('opened_Y2');

    slider_2.classList.add('closed_Y2');

  } else {

    slider_2.classList.remove('closed_Y2');

    slider_2.classList.add('opened_Y2');



  }

}

.content_EQ_Announcement_Y {

  margin: 0 auto;

  padding: 10px 0 10px 0;

  width: 33.2%;

  height: 300px;

  display: inline-block;

  float: left;

  border-right: 1px solid #e5e5e5;

  background: rgba(0, 0, 0, .0);

  text-align: center;

  cursor: pointer;

}



.Y1 {

  border-right: 0px solid #e5e5e5;

}



.EQ_Announcement_Y1 {

  overflow: hidden;

  position: absolute;

  height: 292px;

  width: 100%;

  background: rgba(0, 0, 0, .0);

  margin-top: 4px;

}



.slider_Y1,

.slider_Y2 {

  height: 100%;

  width: 100%;

  background: rgba(0, 0, 0, .0);

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  -ms-box-sizing: border-box;

  box-sizing: border-box;

  padding: 0px;

  border: 1px solid #cccccc;

  z-index: 200;

  -webkit-transition: -webkit-transform .3s ease;

  -moz-transition: -moz-transform .3s ease;

  -ms-transition: -ms-transform .3s ease;

  transition: transform .3s ease;

}



.slider_Y1.opened_Y1,

.slider_Y2.opened_Y2 {

  -webkit-transform: translate(0, 0%);

  -moz-transform: translate(0, 0%);

  -ms-transform: translate(0, 0%);

  transform: translate(0, 0%);

  background: #fff;

}



.slider_Y1.closed_Y1,

.slider_Y2.closed_Y2 {

  -webkit-transform: translate(0, 100%);

  -moz-transform: translate(0, 100%);

  -ms-transform: translate(0, 100%);

  transform: translate(0, 100%);

}



#toggle_Y11,

#toggle_Y21 {

  margin: 0;

  padding: 0;

  background: rgba(0, 0, 0, .0);

  width: 100%;

  height: 100%;

  text-align: left;

  position: absolute;

}

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>





<div class="EQ_Announcement_Y1">

  <div class='content_EQ_Announcement_Y'>

    <div id='toggle_Y1'>2016</div>

  </div>

  <div class='content_EQ_Announcement_Y'>

    <div id='toggle_Y2'>2017</div>

  </div>

  <div class='content_EQ_Announcement_Y'>

    <div id='toggle_Y3'>2018</div>

  </div>



  <div class="slider_Y1 closed_Y1">

    <div id='toggle_Y11'>

      PART 01

    </div>

  </div>

  <div class="slider_Y2 closed_Y2">

    <div id='toggle_Y21'>

      PART 02

    </div>

  </div>

</div>








var toggle = document.getElementById('toggle_Y1');

var slider = document.querySelector('.slider_Y1');

var toggle1 = document.getElementById('toggle_Y11');





toggle.addEventListener('click', toggleSlider, false);

toggle1.addEventListener('click', toggleSlider, false);





function toggleSlider() {

  if (slider.classList.contains('opened_Y1')) {

    slider.classList.remove('opened_Y1');

    slider.classList.add('closed_Y1');

  } else {

    slider.classList.remove('closed_Y1');

    slider.classList.add('opened_Y1');



  }

}





var toggle_2 = document.getElementById('toggle_Y2');

var slider_2 = document.querySelector('.slider_Y2');

var toggle1_2 = document.getElementById('toggle_Y21');





toggle_2.addEventListener('click', toggleSlider_2, false);

toggle1_2.addEventListener('click', toggleSlider_2, false);





function toggleSlider_2() {

  if (slider_2.classList.contains('opened_Y2')) {

    slider_2.classList.remove('opened_Y2');

    slider_2.classList.add('closed_Y2');

  } else {

    slider_2.classList.remove('closed_Y2');

    slider_2.classList.add('opened_Y2');



  }

}

.content_EQ_Announcement_Y {

  margin: 0 auto;

  padding: 10px 0 10px 0;

  width: 33.2%;

  height: 300px;

  display: inline-block;

  float: left;

  border-right: 1px solid #e5e5e5;

  background: rgba(0, 0, 0, .0);

  text-align: center;

  cursor: pointer;

}



.Y1 {

  border-right: 0px solid #e5e5e5;

}



.EQ_Announcement_Y1 {

  overflow: hidden;

  position: absolute;

  height: 292px;

  width: 100%;

  background: rgba(0, 0, 0, .0);

  margin-top: 4px;

}



.slider_Y1,

.slider_Y2 {

  height: 100%;

  width: 100%;

  background: rgba(0, 0, 0, .0);

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  -ms-box-sizing: border-box;

  box-sizing: border-box;

  padding: 0px;

  border: 1px solid #cccccc;

  z-index: 200;

  -webkit-transition: -webkit-transform .3s ease;

  -moz-transition: -moz-transform .3s ease;

  -ms-transition: -ms-transform .3s ease;

  transition: transform .3s ease;

}



.slider_Y1.opened_Y1,

.slider_Y2.opened_Y2 {

  -webkit-transform: translate(0, 0%);

  -moz-transform: translate(0, 0%);

  -ms-transform: translate(0, 0%);

  transform: translate(0, 0%);

  background: #fff;

}



.slider_Y1.closed_Y1,

.slider_Y2.closed_Y2 {

  -webkit-transform: translate(0, 100%);

  -moz-transform: translate(0, 100%);

  -ms-transform: translate(0, 100%);

  transform: translate(0, 100%);

}



#toggle_Y11,

#toggle_Y21 {

  margin: 0;

  padding: 0;

  background: rgba(0, 0, 0, .0);

  width: 100%;

  height: 100%;

  text-align: left;

  position: absolute;

}

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>





<div class="EQ_Announcement_Y1">

  <div class='content_EQ_Announcement_Y'>

    <div id='toggle_Y1'>2016</div>

  </div>

  <div class='content_EQ_Announcement_Y'>

    <div id='toggle_Y2'>2017</div>

  </div>

  <div class='content_EQ_Announcement_Y'>

    <div id='toggle_Y3'>2018</div>

  </div>



  <div class="slider_Y1 closed_Y1">

    <div id='toggle_Y11'>

      PART 01

    </div>

  </div>

  <div class="slider_Y2 closed_Y2">

    <div id='toggle_Y21'>

      PART 02

    </div>

  </div>

</div>





var toggle = document.getElementById('toggle_Y1');

var slider = document.querySelector('.slider_Y1');

var toggle1 = document.getElementById('toggle_Y11');





toggle.addEventListener('click', toggleSlider, false);

toggle1.addEventListener('click', toggleSlider, false);





function toggleSlider() {

  if (slider.classList.contains('opened_Y1')) {

    slider.classList.remove('opened_Y1');

    slider.classList.add('closed_Y1');

  } else {

    slider.classList.remove('closed_Y1');

    slider.classList.add('opened_Y1');



  }

}





var toggle_2 = document.getElementById('toggle_Y2');

var slider_2 = document.querySelector('.slider_Y2');

var toggle1_2 = document.getElementById('toggle_Y21');





toggle_2.addEventListener('click', toggleSlider_2, false);

toggle1_2.addEventListener('click', toggleSlider_2, false);





function toggleSlider_2() {

  if (slider_2.classList.contains('opened_Y2')) {

    slider_2.classList.remove('opened_Y2');

    slider_2.classList.add('closed_Y2');

  } else {

    slider_2.classList.remove('closed_Y2');

    slider_2.classList.add('opened_Y2');



  }

}

.content_EQ_Announcement_Y {

  margin: 0 auto;

  padding: 10px 0 10px 0;

  width: 33.2%;

  height: 300px;

  display: inline-block;

  float: left;

  border-right: 1px solid #e5e5e5;

  background: rgba(0, 0, 0, .0);

  text-align: center;

  cursor: pointer;

}



.Y1 {

  border-right: 0px solid #e5e5e5;

}



.EQ_Announcement_Y1 {

  overflow: hidden;

  position: absolute;

  height: 292px;

  width: 100%;

  background: rgba(0, 0, 0, .0);

  margin-top: 4px;

}



.slider_Y1,

.slider_Y2 {

  height: 100%;

  width: 100%;

  background: rgba(0, 0, 0, .0);

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  -ms-box-sizing: border-box;

  box-sizing: border-box;

  padding: 0px;

  border: 1px solid #cccccc;

  z-index: 200;

  -webkit-transition: -webkit-transform .3s ease;

  -moz-transition: -moz-transform .3s ease;

  -ms-transition: -ms-transform .3s ease;

  transition: transform .3s ease;

}



.slider_Y1.opened_Y1,

.slider_Y2.opened_Y2 {

  -webkit-transform: translate(0, 0%);

  -moz-transform: translate(0, 0%);

  -ms-transform: translate(0, 0%);

  transform: translate(0, 0%);

  background: #fff;

}



.slider_Y1.closed_Y1,

.slider_Y2.closed_Y2 {

  -webkit-transform: translate(0, 100%);

  -moz-transform: translate(0, 100%);

  -ms-transform: translate(0, 100%);

  transform: translate(0, 100%);

}



#toggle_Y11,

#toggle_Y21 {

  margin: 0;

  padding: 0;

  background: rgba(0, 0, 0, .0);

  width: 100%;

  height: 100%;

  text-align: left;

  position: absolute;

}

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>





<div class="EQ_Announcement_Y1">

  <div class='content_EQ_Announcement_Y'>

    <div id='toggle_Y1'>2016</div>

  </div>

  <div class='content_EQ_Announcement_Y'>

    <div id='toggle_Y2'>2017</div>

  </div>

  <div class='content_EQ_Announcement_Y'>

    <div id='toggle_Y3'>2018</div>

  </div>



  <div class="slider_Y1 closed_Y1">

    <div id='toggle_Y11'>

      PART 01

    </div>

  </div>

  <div class="slider_Y2 closed_Y2">

    <div id='toggle_Y21'>

      PART 02

    </div>

  </div>

</div>





javascript html css




javascript html css






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 16 '18 at 18:10









Tyler Roper

14.4k32242




14.4k32242










asked Nov 16 '18 at 18:07









BogasoBogaso

425514




425514













  • In the future, please include your code in the question itself. I've edited your question to include it as a runnable snippet.

    – Tyler Roper
    Nov 16 '18 at 18:10











  • So I switched the order of your HTML and the part 2 appears, the part 1 does not. The first slider is stacked on top of the other slider, so its blocking its ability to come into the fold. My recommendation would be to place your sliders within a parent div. Instead of sliding up the individual slides, slide up the container but still do the transformations on the specific element you want to show.

    – thefromanguard
    Nov 16 '18 at 18:33





















  • In the future, please include your code in the question itself. I've edited your question to include it as a runnable snippet.

    – Tyler Roper
    Nov 16 '18 at 18:10











  • So I switched the order of your HTML and the part 2 appears, the part 1 does not. The first slider is stacked on top of the other slider, so its blocking its ability to come into the fold. My recommendation would be to place your sliders within a parent div. Instead of sliding up the individual slides, slide up the container but still do the transformations on the specific element you want to show.

    – thefromanguard
    Nov 16 '18 at 18:33



















In the future, please include your code in the question itself. I've edited your question to include it as a runnable snippet.

– Tyler Roper
Nov 16 '18 at 18:10





In the future, please include your code in the question itself. I've edited your question to include it as a runnable snippet.

– Tyler Roper
Nov 16 '18 at 18:10













So I switched the order of your HTML and the part 2 appears, the part 1 does not. The first slider is stacked on top of the other slider, so its blocking its ability to come into the fold. My recommendation would be to place your sliders within a parent div. Instead of sliding up the individual slides, slide up the container but still do the transformations on the specific element you want to show.

– thefromanguard
Nov 16 '18 at 18:33







So I switched the order of your HTML and the part 2 appears, the part 1 does not. The first slider is stacked on top of the other slider, so its blocking its ability to come into the fold. My recommendation would be to place your sliders within a parent div. Instead of sliding up the individual slides, slide up the container but still do the transformations on the specific element you want to show.

– thefromanguard
Nov 16 '18 at 18:33














2 Answers
2






active

oldest

votes


















1














Transform .slider_Y2.opened_Y2 to -100%






var toggle = document.getElementById('toggle_Y1');

var slider = document.querySelector('.slider_Y1');

var toggle1 = document.getElementById('toggle_Y11');





toggle.addEventListener('click', toggleSlider, false);

toggle1.addEventListener('click', toggleSlider, false);





function toggleSlider() {

  if (slider.classList.contains('opened_Y1')) {

    slider.classList.remove('opened_Y1');

    slider.classList.add('closed_Y1');

  } else {

    slider.classList.remove('closed_Y1');

    slider.classList.add('opened_Y1');



  }

}





var toggle_2 = document.getElementById('toggle_Y2');

var slider_2 = document.querySelector('.slider_Y2');

var toggle1_2 = document.getElementById('toggle_Y21');





toggle_2.addEventListener('click', toggleSlider_2, false);

toggle1_2.addEventListener('click', toggleSlider_2, false);





function toggleSlider_2() {

  if (slider_2.classList.contains('opened_Y2')) {

    slider_2.classList.remove('opened_Y2');

    slider_2.classList.add('closed_Y2');

  } else {

    slider_2.classList.remove('closed_Y2');

    slider_2.classList.add('opened_Y2');



  }

}

.content_EQ_Announcement_Y {

  margin: 0 auto;

  padding: 10px 0 10px 0;

  width: 33.2%;

  height: 300px;

  display: inline-block;

  float: left;

  border-right: 1px solid #e5e5e5;

  background: rgba(0, 0, 0, .0);

  text-align: center;

  cursor: pointer;

}



.Y1 {

  border-right: 0px solid #e5e5e5;

}



.EQ_Announcement_Y1 {

  overflow: hidden;

  position: absolute;

  height: 292px;

  width: 100%;

  background: rgba(0, 0, 0, .0);

  margin-top: 4px;

}



.slider_Y1,

.slider_Y2 {

  height: 100%;

  width: 100%;

  background: rgba(0, 0, 0, .0);

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  -ms-box-sizing: border-box;

  box-sizing: border-box;

  padding: 0px;

  border: 1px solid #cccccc;

  z-index: 200;

  -webkit-transition: -webkit-transform .3s ease;

  -moz-transition: -moz-transform .3s ease;

  -ms-transition: -ms-transform .3s ease;

  transition: transform .3s ease;

}



.slider_Y1.opened_Y1 {

  -webkit-transform: translate(0, 0%);

  -moz-transform: translate(0, 0%);

  -ms-transform: translate(0, 0%);

  transform: translate(0, 0%);

  background: #fff;

}



.slider_Y1.closed_Y1,

.slider_Y2.closed_Y2 {

  -webkit-transform: translate(0, 100%);

  -moz-transform: translate(0, 100%);

  -ms-transform: translate(0, 100%);

  transform: translate(0, 100%);

}



.slider_Y2.opened_Y2 {

  background: white;

  -webkit-transform: translate(0, -100%);

  -moz-transform: translate(0, -100%);

  -ms-transform: translate(0, -100%);

  transform: translate(0, -100%);

}



#toggle_Y11,

#toggle_Y21 {

  margin: 0;

  padding: 0;

  background: rgba(0, 0, 0, .0);

  width: 100%;

  height: 100%;

  text-align: left;

  position: absolute;

}

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>





<div class="EQ_Announcement_Y1">

  <div class='content_EQ_Announcement_Y'>

    <div id='toggle_Y1'>2016</div>

  </div>

  <div class='content_EQ_Announcement_Y'>

    <div id='toggle_Y2'>2017</div>

  </div>

  <div class='content_EQ_Announcement_Y'>

    <div id='toggle_Y3'>2018</div>

  </div>



  <div class="slider_Y1 closed_Y1">

    <div id='toggle_Y11'>

      PART 01

    </div>

  </div>

  <div class="slider_Y2 closed_Y2">

    <div id='toggle_Y21'>

      PART 02

    </div>

  </div>

</div>








share|improve this answer































    1














    .slider_Y1 height = 100%  ===> distance from top = 100%
    
.slider_Y2.opened_Y2 height = 100% + .slider_Y1 height  === > distance from top = 200%
    

    

    
.slider_Y2.opened_Y2 {
    
    -webkit-transform: translate(0, -100%);
    
    -moz-transform: translate(0, -100%);
    
    -ms-transform: translate(0, -100%);
    
    transform: translate(0, -100%);
    
    background: #fff;
    
}





    share|improve this answer
























      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53343216%2fshow-hide-multiple-popup-when-clicked%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      1














      Transform .slider_Y2.opened_Y2 to -100%






      var toggle = document.getElementById('toggle_Y1');
      
var slider = document.querySelector('.slider_Y1');
      
var toggle1 = document.getElementById('toggle_Y11');
      

      

      
toggle.addEventListener('click', toggleSlider, false);
      
toggle1.addEventListener('click', toggleSlider, false);
      

      

      
function toggleSlider() {
      
  if (slider.classList.contains('opened_Y1')) {
      
    slider.classList.remove('opened_Y1');
      
    slider.classList.add('closed_Y1');
      
  } else {
      
    slider.classList.remove('closed_Y1');
      
    slider.classList.add('opened_Y1');
      

      
  }
      
}
      

      

      
var toggle_2 = document.getElementById('toggle_Y2');
      
var slider_2 = document.querySelector('.slider_Y2');
      
var toggle1_2 = document.getElementById('toggle_Y21');
      

      

      
toggle_2.addEventListener('click', toggleSlider_2, false);
      
toggle1_2.addEventListener('click', toggleSlider_2, false);
      

      

      
function toggleSlider_2() {
      
  if (slider_2.classList.contains('opened_Y2')) {
      
    slider_2.classList.remove('opened_Y2');
      
    slider_2.classList.add('closed_Y2');
      
  } else {
      
    slider_2.classList.remove('closed_Y2');
      
    slider_2.classList.add('opened_Y2');
      

      
  }
      
}

      .content_EQ_Announcement_Y {
      
  margin: 0 auto;
      
  padding: 10px 0 10px 0;
      
  width: 33.2%;
      
  height: 300px;
      
  display: inline-block;
      
  float: left;
      
  border-right: 1px solid #e5e5e5;
      
  background: rgba(0, 0, 0, .0);
      
  text-align: center;
      
  cursor: pointer;
      
}
      

      
.Y1 {
      
  border-right: 0px solid #e5e5e5;
      
}
      

      
.EQ_Announcement_Y1 {
      
  overflow: hidden;
      
  position: absolute;
      
  height: 292px;
      
  width: 100%;
      
  background: rgba(0, 0, 0, .0);
      
  margin-top: 4px;
      
}
      

      
.slider_Y1,
      
.slider_Y2 {
      
  height: 100%;
      
  width: 100%;
      
  background: rgba(0, 0, 0, .0);
      
  -webkit-box-sizing: border-box;
      
  -moz-box-sizing: border-box;
      
  -ms-box-sizing: border-box;
      
  box-sizing: border-box;
      
  padding: 0px;
      
  border: 1px solid #cccccc;
      
  z-index: 200;
      
  -webkit-transition: -webkit-transform .3s ease;
      
  -moz-transition: -moz-transform .3s ease;
      
  -ms-transition: -ms-transform .3s ease;
      
  transition: transform .3s ease;
      
}
      

      
.slider_Y1.opened_Y1 {
      
  -webkit-transform: translate(0, 0%);
      
  -moz-transform: translate(0, 0%);
      
  -ms-transform: translate(0, 0%);
      
  transform: translate(0, 0%);
      
  background: #fff;
      
}
      

      
.slider_Y1.closed_Y1,
      
.slider_Y2.closed_Y2 {
      
  -webkit-transform: translate(0, 100%);
      
  -moz-transform: translate(0, 100%);
      
  -ms-transform: translate(0, 100%);
      
  transform: translate(0, 100%);
      
}
      

      
.slider_Y2.opened_Y2 {
      
  background: white;
      
  -webkit-transform: translate(0, -100%);
      
  -moz-transform: translate(0, -100%);
      
  -ms-transform: translate(0, -100%);
      
  transform: translate(0, -100%);
      
}
      

      
#toggle_Y11,
      
#toggle_Y21 {
      
  margin: 0;
      
  padding: 0;
      
  background: rgba(0, 0, 0, .0);
      
  width: 100%;
      
  height: 100%;
      
  text-align: left;
      
  position: absolute;
      
}

      <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      

      

      
<div class="EQ_Announcement_Y1">
      
  <div class='content_EQ_Announcement_Y'>
      
    <div id='toggle_Y1'>2016</div>
      
  </div>
      
  <div class='content_EQ_Announcement_Y'>
      
    <div id='toggle_Y2'>2017</div>
      
  </div>
      
  <div class='content_EQ_Announcement_Y'>
      
    <div id='toggle_Y3'>2018</div>
      
  </div>
      

      
  <div class="slider_Y1 closed_Y1">
      
    <div id='toggle_Y11'>
      
      PART 01
      
    </div>
      
  </div>
      
  <div class="slider_Y2 closed_Y2">
      
    <div id='toggle_Y21'>
      
      PART 02
      
    </div>
      
  </div>
      
</div>








      share|improve this answer




























        1














        Transform .slider_Y2.opened_Y2 to -100%






        var toggle = document.getElementById('toggle_Y1');
        
var slider = document.querySelector('.slider_Y1');
        
var toggle1 = document.getElementById('toggle_Y11');
        

        

        
toggle.addEventListener('click', toggleSlider, false);
        
toggle1.addEventListener('click', toggleSlider, false);
        

        

        
function toggleSlider() {
        
  if (slider.classList.contains('opened_Y1')) {
        
    slider.classList.remove('opened_Y1');
        
    slider.classList.add('closed_Y1');
        
  } else {
        
    slider.classList.remove('closed_Y1');
        
    slider.classList.add('opened_Y1');
        

        
  }
        
}
        

        

        
var toggle_2 = document.getElementById('toggle_Y2');
        
var slider_2 = document.querySelector('.slider_Y2');
        
var toggle1_2 = document.getElementById('toggle_Y21');
        

        

        
toggle_2.addEventListener('click', toggleSlider_2, false);
        
toggle1_2.addEventListener('click', toggleSlider_2, false);
        

        

        
function toggleSlider_2() {
        
  if (slider_2.classList.contains('opened_Y2')) {
        
    slider_2.classList.remove('opened_Y2');
        
    slider_2.classList.add('closed_Y2');
        
  } else {
        
    slider_2.classList.remove('closed_Y2');
        
    slider_2.classList.add('opened_Y2');
        

        
  }
        
}

        .content_EQ_Announcement_Y {
        
  margin: 0 auto;
        
  padding: 10px 0 10px 0;
        
  width: 33.2%;
        
  height: 300px;
        
  display: inline-block;
        
  float: left;
        
  border-right: 1px solid #e5e5e5;
        
  background: rgba(0, 0, 0, .0);
        
  text-align: center;
        
  cursor: pointer;
        
}
        

        
.Y1 {
        
  border-right: 0px solid #e5e5e5;
        
}
        

        
.EQ_Announcement_Y1 {
        
  overflow: hidden;
        
  position: absolute;
        
  height: 292px;
        
  width: 100%;
        
  background: rgba(0, 0, 0, .0);
        
  margin-top: 4px;
        
}
        

        
.slider_Y1,
        
.slider_Y2 {
        
  height: 100%;
        
  width: 100%;
        
  background: rgba(0, 0, 0, .0);
        
  -webkit-box-sizing: border-box;
        
  -moz-box-sizing: border-box;
        
  -ms-box-sizing: border-box;
        
  box-sizing: border-box;
        
  padding: 0px;
        
  border: 1px solid #cccccc;
        
  z-index: 200;
        
  -webkit-transition: -webkit-transform .3s ease;
        
  -moz-transition: -moz-transform .3s ease;
        
  -ms-transition: -ms-transform .3s ease;
        
  transition: transform .3s ease;
        
}
        

        
.slider_Y1.opened_Y1 {
        
  -webkit-transform: translate(0, 0%);
        
  -moz-transform: translate(0, 0%);
        
  -ms-transform: translate(0, 0%);
        
  transform: translate(0, 0%);
        
  background: #fff;
        
}
        

        
.slider_Y1.closed_Y1,
        
.slider_Y2.closed_Y2 {
        
  -webkit-transform: translate(0, 100%);
        
  -moz-transform: translate(0, 100%);
        
  -ms-transform: translate(0, 100%);
        
  transform: translate(0, 100%);
        
}
        

        
.slider_Y2.opened_Y2 {
        
  background: white;
        
  -webkit-transform: translate(0, -100%);
        
  -moz-transform: translate(0, -100%);
        
  -ms-transform: translate(0, -100%);
        
  transform: translate(0, -100%);
        
}
        

        
#toggle_Y11,
        
#toggle_Y21 {
        
  margin: 0;
        
  padding: 0;
        
  background: rgba(0, 0, 0, .0);
        
  width: 100%;
        
  height: 100%;
        
  text-align: left;
        
  position: absolute;
        
}

        <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
        

        

        
<div class="EQ_Announcement_Y1">
        
  <div class='content_EQ_Announcement_Y'>
        
    <div id='toggle_Y1'>2016</div>
        
  </div>
        
  <div class='content_EQ_Announcement_Y'>
        
    <div id='toggle_Y2'>2017</div>
        
  </div>
        
  <div class='content_EQ_Announcement_Y'>
        
    <div id='toggle_Y3'>2018</div>
        
  </div>
        

        
  <div class="slider_Y1 closed_Y1">
        
    <div id='toggle_Y11'>
        
      PART 01
        
    </div>
        
  </div>
        
  <div class="slider_Y2 closed_Y2">
        
    <div id='toggle_Y21'>
        
      PART 02
        
    </div>
        
  </div>
        
</div>








        share|improve this answer


























          1












          1








          1







          Transform .slider_Y2.opened_Y2 to -100%






          var toggle = document.getElementById('toggle_Y1');
          
var slider = document.querySelector('.slider_Y1');
          
var toggle1 = document.getElementById('toggle_Y11');
          

          

          
toggle.addEventListener('click', toggleSlider, false);
          
toggle1.addEventListener('click', toggleSlider, false);
          

          

          
function toggleSlider() {
          
  if (slider.classList.contains('opened_Y1')) {
          
    slider.classList.remove('opened_Y1');
          
    slider.classList.add('closed_Y1');
          
  } else {
          
    slider.classList.remove('closed_Y1');
          
    slider.classList.add('opened_Y1');
          

          
  }
          
}
          

          

          
var toggle_2 = document.getElementById('toggle_Y2');
          
var slider_2 = document.querySelector('.slider_Y2');
          
var toggle1_2 = document.getElementById('toggle_Y21');
          

          

          
toggle_2.addEventListener('click', toggleSlider_2, false);
          
toggle1_2.addEventListener('click', toggleSlider_2, false);
          

          

          
function toggleSlider_2() {
          
  if (slider_2.classList.contains('opened_Y2')) {
          
    slider_2.classList.remove('opened_Y2');
          
    slider_2.classList.add('closed_Y2');
          
  } else {
          
    slider_2.classList.remove('closed_Y2');
          
    slider_2.classList.add('opened_Y2');
          

          
  }
          
}

          .content_EQ_Announcement_Y {
          
  margin: 0 auto;
          
  padding: 10px 0 10px 0;
          
  width: 33.2%;
          
  height: 300px;
          
  display: inline-block;
          
  float: left;
          
  border-right: 1px solid #e5e5e5;
          
  background: rgba(0, 0, 0, .0);
          
  text-align: center;
          
  cursor: pointer;
          
}
          

          
.Y1 {
          
  border-right: 0px solid #e5e5e5;
          
}
          

          
.EQ_Announcement_Y1 {
          
  overflow: hidden;
          
  position: absolute;
          
  height: 292px;
          
  width: 100%;
          
  background: rgba(0, 0, 0, .0);
          
  margin-top: 4px;
          
}
          

          
.slider_Y1,
          
.slider_Y2 {
          
  height: 100%;
          
  width: 100%;
          
  background: rgba(0, 0, 0, .0);
          
  -webkit-box-sizing: border-box;
          
  -moz-box-sizing: border-box;
          
  -ms-box-sizing: border-box;
          
  box-sizing: border-box;
          
  padding: 0px;
          
  border: 1px solid #cccccc;
          
  z-index: 200;
          
  -webkit-transition: -webkit-transform .3s ease;
          
  -moz-transition: -moz-transform .3s ease;
          
  -ms-transition: -ms-transform .3s ease;
          
  transition: transform .3s ease;
          
}
          

          
.slider_Y1.opened_Y1 {
          
  -webkit-transform: translate(0, 0%);
          
  -moz-transform: translate(0, 0%);
          
  -ms-transform: translate(0, 0%);
          
  transform: translate(0, 0%);
          
  background: #fff;
          
}
          

          
.slider_Y1.closed_Y1,
          
.slider_Y2.closed_Y2 {
          
  -webkit-transform: translate(0, 100%);
          
  -moz-transform: translate(0, 100%);
          
  -ms-transform: translate(0, 100%);
          
  transform: translate(0, 100%);
          
}
          

          
.slider_Y2.opened_Y2 {
          
  background: white;
          
  -webkit-transform: translate(0, -100%);
          
  -moz-transform: translate(0, -100%);
          
  -ms-transform: translate(0, -100%);
          
  transform: translate(0, -100%);
          
}
          

          
#toggle_Y11,
          
#toggle_Y21 {
          
  margin: 0;
          
  padding: 0;
          
  background: rgba(0, 0, 0, .0);
          
  width: 100%;
          
  height: 100%;
          
  text-align: left;
          
  position: absolute;
          
}

          <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
          

          

          
<div class="EQ_Announcement_Y1">
          
  <div class='content_EQ_Announcement_Y'>
          
    <div id='toggle_Y1'>2016</div>
          
  </div>
          
  <div class='content_EQ_Announcement_Y'>
          
    <div id='toggle_Y2'>2017</div>
          
  </div>
          
  <div class='content_EQ_Announcement_Y'>
          
    <div id='toggle_Y3'>2018</div>
          
  </div>
          

          
  <div class="slider_Y1 closed_Y1">
          
    <div id='toggle_Y11'>
          
      PART 01
          
    </div>
          
  </div>
          
  <div class="slider_Y2 closed_Y2">
          
    <div id='toggle_Y21'>
          
      PART 02
          
    </div>
          
  </div>
          
</div>








          share|improve this answer













          Transform .slider_Y2.opened_Y2 to -100%






          var toggle = document.getElementById('toggle_Y1');
          
var slider = document.querySelector('.slider_Y1');
          
var toggle1 = document.getElementById('toggle_Y11');
          

          

          
toggle.addEventListener('click', toggleSlider, false);
          
toggle1.addEventListener('click', toggleSlider, false);
          

          

          
function toggleSlider() {
          
  if (slider.classList.contains('opened_Y1')) {
          
    slider.classList.remove('opened_Y1');
          
    slider.classList.add('closed_Y1');
          
  } else {
          
    slider.classList.remove('closed_Y1');
          
    slider.classList.add('opened_Y1');
          

          
  }
          
}
          

          

          
var toggle_2 = document.getElementById('toggle_Y2');
          
var slider_2 = document.querySelector('.slider_Y2');
          
var toggle1_2 = document.getElementById('toggle_Y21');
          

          

          
toggle_2.addEventListener('click', toggleSlider_2, false);
          
toggle1_2.addEventListener('click', toggleSlider_2, false);
          

          

          
function toggleSlider_2() {
          
  if (slider_2.classList.contains('opened_Y2')) {
          
    slider_2.classList.remove('opened_Y2');
          
    slider_2.classList.add('closed_Y2');
          
  } else {
          
    slider_2.classList.remove('closed_Y2');
          
    slider_2.classList.add('opened_Y2');
          

          
  }
          
}

          .content_EQ_Announcement_Y {
          
  margin: 0 auto;
          
  padding: 10px 0 10px 0;
          
  width: 33.2%;
          
  height: 300px;
          
  display: inline-block;
          
  float: left;
          
  border-right: 1px solid #e5e5e5;
          
  background: rgba(0, 0, 0, .0);
          
  text-align: center;
          
  cursor: pointer;
          
}
          

          
.Y1 {
          
  border-right: 0px solid #e5e5e5;
          
}
          

          
.EQ_Announcement_Y1 {
          
  overflow: hidden;
          
  position: absolute;
          
  height: 292px;
          
  width: 100%;
          
  background: rgba(0, 0, 0, .0);
          
  margin-top: 4px;
          
}
          

          
.slider_Y1,
          
.slider_Y2 {
          
  height: 100%;
          
  width: 100%;
          
  background: rgba(0, 0, 0, .0);
          
  -webkit-box-sizing: border-box;
          
  -moz-box-sizing: border-box;
          
  -ms-box-sizing: border-box;
          
  box-sizing: border-box;
          
  padding: 0px;
          
  border: 1px solid #cccccc;
          
  z-index: 200;
          
  -webkit-transition: -webkit-transform .3s ease;
          
  -moz-transition: -moz-transform .3s ease;
          
  -ms-transition: -ms-transform .3s ease;
          
  transition: transform .3s ease;
          
}
          

          
.slider_Y1.opened_Y1 {
          
  -webkit-transform: translate(0, 0%);
          
  -moz-transform: translate(0, 0%);
          
  -ms-transform: translate(0, 0%);
          
  transform: translate(0, 0%);
          
  background: #fff;
          
}
          

          
.slider_Y1.closed_Y1,
          
.slider_Y2.closed_Y2 {
          
  -webkit-transform: translate(0, 100%);
          
  -moz-transform: translate(0, 100%);
          
  -ms-transform: translate(0, 100%);
          
  transform: translate(0, 100%);
          
}
          

          
.slider_Y2.opened_Y2 {
          
  background: white;
          
  -webkit-transform: translate(0, -100%);
          
  -moz-transform: translate(0, -100%);
          
  -ms-transform: translate(0, -100%);
          
  transform: translate(0, -100%);
          
}
          

          
#toggle_Y11,
          
#toggle_Y21 {
          
  margin: 0;
          
  padding: 0;
          
  background: rgba(0, 0, 0, .0);
          
  width: 100%;
          
  height: 100%;
          
  text-align: left;
          
  position: absolute;
          
}

          <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
          

          

          
<div class="EQ_Announcement_Y1">
          
  <div class='content_EQ_Announcement_Y'>
          
    <div id='toggle_Y1'>2016</div>
          
  </div>
          
  <div class='content_EQ_Announcement_Y'>
          
    <div id='toggle_Y2'>2017</div>
          
  </div>
          
  <div class='content_EQ_Announcement_Y'>
          
    <div id='toggle_Y3'>2018</div>
          
  </div>
          

          
  <div class="slider_Y1 closed_Y1">
          
    <div id='toggle_Y11'>
          
      PART 01
          
    </div>
          
  </div>
          
  <div class="slider_Y2 closed_Y2">
          
    <div id='toggle_Y21'>
          
      PART 02
          
    </div>
          
  </div>
          
</div>








          var toggle = document.getElementById('toggle_Y1');
          
var slider = document.querySelector('.slider_Y1');
          
var toggle1 = document.getElementById('toggle_Y11');
          

          

          
toggle.addEventListener('click', toggleSlider, false);
          
toggle1.addEventListener('click', toggleSlider, false);
          

          

          
function toggleSlider() {
          
  if (slider.classList.contains('opened_Y1')) {
          
    slider.classList.remove('opened_Y1');
          
    slider.classList.add('closed_Y1');
          
  } else {
          
    slider.classList.remove('closed_Y1');
          
    slider.classList.add('opened_Y1');
          

          
  }
          
}
          

          

          
var toggle_2 = document.getElementById('toggle_Y2');
          
var slider_2 = document.querySelector('.slider_Y2');
          
var toggle1_2 = document.getElementById('toggle_Y21');
          

          

          
toggle_2.addEventListener('click', toggleSlider_2, false);
          
toggle1_2.addEventListener('click', toggleSlider_2, false);
          

          

          
function toggleSlider_2() {
          
  if (slider_2.classList.contains('opened_Y2')) {
          
    slider_2.classList.remove('opened_Y2');
          
    slider_2.classList.add('closed_Y2');
          
  } else {
          
    slider_2.classList.remove('closed_Y2');
          
    slider_2.classList.add('opened_Y2');
          

          
  }
          
}

          .content_EQ_Announcement_Y {
          
  margin: 0 auto;
          
  padding: 10px 0 10px 0;
          
  width: 33.2%;
          
  height: 300px;
          
  display: inline-block;
          
  float: left;
          
  border-right: 1px solid #e5e5e5;
          
  background: rgba(0, 0, 0, .0);
          
  text-align: center;
          
  cursor: pointer;
          
}
          

          
.Y1 {
          
  border-right: 0px solid #e5e5e5;
          
}
          

          
.EQ_Announcement_Y1 {
          
  overflow: hidden;
          
  position: absolute;
          
  height: 292px;
          
  width: 100%;
          
  background: rgba(0, 0, 0, .0);
          
  margin-top: 4px;
          
}
          

          
.slider_Y1,
          
.slider_Y2 {
          
  height: 100%;
          
  width: 100%;
          
  background: rgba(0, 0, 0, .0);
          
  -webkit-box-sizing: border-box;
          
  -moz-box-sizing: border-box;
          
  -ms-box-sizing: border-box;
          
  box-sizing: border-box;
          
  padding: 0px;
          
  border: 1px solid #cccccc;
          
  z-index: 200;
          
  -webkit-transition: -webkit-transform .3s ease;
          
  -moz-transition: -moz-transform .3s ease;
          
  -ms-transition: -ms-transform .3s ease;
          
  transition: transform .3s ease;
          
}
          

          
.slider_Y1.opened_Y1 {
          
  -webkit-transform: translate(0, 0%);
          
  -moz-transform: translate(0, 0%);
          
  -ms-transform: translate(0, 0%);
          
  transform: translate(0, 0%);
          
  background: #fff;
          
}
          

          
.slider_Y1.closed_Y1,
          
.slider_Y2.closed_Y2 {
          
  -webkit-transform: translate(0, 100%);
          
  -moz-transform: translate(0, 100%);
          
  -ms-transform: translate(0, 100%);
          
  transform: translate(0, 100%);
          
}
          

          
.slider_Y2.opened_Y2 {
          
  background: white;
          
  -webkit-transform: translate(0, -100%);
          
  -moz-transform: translate(0, -100%);
          
  -ms-transform: translate(0, -100%);
          
  transform: translate(0, -100%);
          
}
          

          
#toggle_Y11,
          
#toggle_Y21 {
          
  margin: 0;
          
  padding: 0;
          
  background: rgba(0, 0, 0, .0);
          
  width: 100%;
          
  height: 100%;
          
  text-align: left;
          
  position: absolute;
          
}

          <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
          

          

          
<div class="EQ_Announcement_Y1">
          
  <div class='content_EQ_Announcement_Y'>
          
    <div id='toggle_Y1'>2016</div>
          
  </div>
          
  <div class='content_EQ_Announcement_Y'>
          
    <div id='toggle_Y2'>2017</div>
          
  </div>
          
  <div class='content_EQ_Announcement_Y'>
          
    <div id='toggle_Y3'>2018</div>
          
  </div>
          

          
  <div class="slider_Y1 closed_Y1">
          
    <div id='toggle_Y11'>
          
      PART 01
          
    </div>
          
  </div>
          
  <div class="slider_Y2 closed_Y2">
          
    <div id='toggle_Y21'>
          
      PART 02
          
    </div>
          
  </div>
          
</div>





          var toggle = document.getElementById('toggle_Y1');
          
var slider = document.querySelector('.slider_Y1');
          
var toggle1 = document.getElementById('toggle_Y11');
          

          

          
toggle.addEventListener('click', toggleSlider, false);
          
toggle1.addEventListener('click', toggleSlider, false);
          

          

          
function toggleSlider() {
          
  if (slider.classList.contains('opened_Y1')) {
          
    slider.classList.remove('opened_Y1');
          
    slider.classList.add('closed_Y1');
          
  } else {
          
    slider.classList.remove('closed_Y1');
          
    slider.classList.add('opened_Y1');
          

          
  }
          
}
          

          

          
var toggle_2 = document.getElementById('toggle_Y2');
          
var slider_2 = document.querySelector('.slider_Y2');
          
var toggle1_2 = document.getElementById('toggle_Y21');
          

          

          
toggle_2.addEventListener('click', toggleSlider_2, false);
          
toggle1_2.addEventListener('click', toggleSlider_2, false);
          

          

          
function toggleSlider_2() {
          
  if (slider_2.classList.contains('opened_Y2')) {
          
    slider_2.classList.remove('opened_Y2');
          
    slider_2.classList.add('closed_Y2');
          
  } else {
          
    slider_2.classList.remove('closed_Y2');
          
    slider_2.classList.add('opened_Y2');
          

          
  }
          
}

          .content_EQ_Announcement_Y {
          
  margin: 0 auto;
          
  padding: 10px 0 10px 0;
          
  width: 33.2%;
          
  height: 300px;
          
  display: inline-block;
          
  float: left;
          
  border-right: 1px solid #e5e5e5;
          
  background: rgba(0, 0, 0, .0);
          
  text-align: center;
          
  cursor: pointer;
          
}
          

          
.Y1 {
          
  border-right: 0px solid #e5e5e5;
          
}
          

          
.EQ_Announcement_Y1 {
          
  overflow: hidden;
          
  position: absolute;
          
  height: 292px;
          
  width: 100%;
          
  background: rgba(0, 0, 0, .0);
          
  margin-top: 4px;
          
}
          

          
.slider_Y1,
          
.slider_Y2 {
          
  height: 100%;
          
  width: 100%;
          
  background: rgba(0, 0, 0, .0);
          
  -webkit-box-sizing: border-box;
          
  -moz-box-sizing: border-box;
          
  -ms-box-sizing: border-box;
          
  box-sizing: border-box;
          
  padding: 0px;
          
  border: 1px solid #cccccc;
          
  z-index: 200;
          
  -webkit-transition: -webkit-transform .3s ease;
          
  -moz-transition: -moz-transform .3s ease;
          
  -ms-transition: -ms-transform .3s ease;
          
  transition: transform .3s ease;
          
}
          

          
.slider_Y1.opened_Y1 {
          
  -webkit-transform: translate(0, 0%);
          
  -moz-transform: translate(0, 0%);
          
  -ms-transform: translate(0, 0%);
          
  transform: translate(0, 0%);
          
  background: #fff;
          
}
          

          
.slider_Y1.closed_Y1,
          
.slider_Y2.closed_Y2 {
          
  -webkit-transform: translate(0, 100%);
          
  -moz-transform: translate(0, 100%);
          
  -ms-transform: translate(0, 100%);
          
  transform: translate(0, 100%);
          
}
          

          
.slider_Y2.opened_Y2 {
          
  background: white;
          
  -webkit-transform: translate(0, -100%);
          
  -moz-transform: translate(0, -100%);
          
  -ms-transform: translate(0, -100%);
          
  transform: translate(0, -100%);
          
}
          

          
#toggle_Y11,
          
#toggle_Y21 {
          
  margin: 0;
          
  padding: 0;
          
  background: rgba(0, 0, 0, .0);
          
  width: 100%;
          
  height: 100%;
          
  text-align: left;
          
  position: absolute;
          
}

          <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
          

          

          
<div class="EQ_Announcement_Y1">
          
  <div class='content_EQ_Announcement_Y'>
          
    <div id='toggle_Y1'>2016</div>
          
  </div>
          
  <div class='content_EQ_Announcement_Y'>
          
    <div id='toggle_Y2'>2017</div>
          
  </div>
          
  <div class='content_EQ_Announcement_Y'>
          
    <div id='toggle_Y3'>2018</div>
          
  </div>
          

          
  <div class="slider_Y1 closed_Y1">
          
    <div id='toggle_Y11'>
          
      PART 01
          
    </div>
          
  </div>
          
  <div class="slider_Y2 closed_Y2">
          
    <div id='toggle_Y21'>
          
      PART 02
          
    </div>
          
  </div>
          
</div>






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 16 '18 at 18:37









          Dhaval JardoshDhaval Jardosh

          3,96721137




          3,96721137

























              1














              .slider_Y1 height = 100%  ===> distance from top = 100%
              
.slider_Y2.opened_Y2 height = 100% + .slider_Y1 height  === > distance from top = 200%
              

              

              
.slider_Y2.opened_Y2 {
              
    -webkit-transform: translate(0, -100%);
              
    -moz-transform: translate(0, -100%);
              
    -ms-transform: translate(0, -100%);
              
    transform: translate(0, -100%);
              
    background: #fff;
              
}





              share|improve this answer




























                1














                .slider_Y1 height = 100%  ===> distance from top = 100%
                
.slider_Y2.opened_Y2 height = 100% + .slider_Y1 height  === > distance from top = 200%
                

                

                
.slider_Y2.opened_Y2 {
                
    -webkit-transform: translate(0, -100%);
                
    -moz-transform: translate(0, -100%);
                
    -ms-transform: translate(0, -100%);
                
    transform: translate(0, -100%);
                
    background: #fff;
                
}





                share|improve this answer


























                  1












                  1








                  1







                  .slider_Y1 height = 100%  ===> distance from top = 100%
                  
.slider_Y2.opened_Y2 height = 100% + .slider_Y1 height  === > distance from top = 200%
                  

                  

                  
.slider_Y2.opened_Y2 {
                  
    -webkit-transform: translate(0, -100%);
                  
    -moz-transform: translate(0, -100%);
                  
    -ms-transform: translate(0, -100%);
                  
    transform: translate(0, -100%);
                  
    background: #fff;
                  
}





                  share|improve this answer













                  .slider_Y1 height = 100%  ===> distance from top = 100%
                  
.slider_Y2.opened_Y2 height = 100% + .slider_Y1 height  === > distance from top = 200%
                  

                  

                  
.slider_Y2.opened_Y2 {
                  
    -webkit-transform: translate(0, -100%);
                  
    -moz-transform: translate(0, -100%);
                  
    -ms-transform: translate(0, -100%);
                  
    transform: translate(0, -100%);
                  
    background: #fff;
                  
}






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 16 '18 at 18:34









                  Hossein OraeiHossein Oraei

                  1744




                  1744






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid …



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53343216%2fshow-hide-multiple-popup-when-clicked%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      -

                      Popular posts from this blog

                      Florida Star v. B. J. F.

                      Image
                      Florida Star v. B. J. F. From Wikipedia, the free encyclopedia Jump to navigation Jump to search United States Supreme Court case Florida Star v. B. J. F. Supreme Court of the United States Argued March 21, 1989 Decided June 21, 1989 Full case name The Florida Star v. B. J. F. Citations 491 U.S. 524 ( more ) 109 S. Ct. 2603; 105 L. Ed. 2d 443; 1989 U.S. LEXIS 3120; 57 U.S.L.W. 4816; 16 Media L. Rep. 1801 Prior history The Florida Star v. B.J.F., 530 So.2d 286 (1988) Supreme Court of Florida; Florida Star v. B.J.F., 499 So.2d 883 (1986) Fla. Dist. Court of Appeals Holding Florida Stat. § 794.03 is unconstitutional to the extent it makes the truthful reporting of information that was a matter of public record unlawful, as it violates the First Amendment. Court membership Chief Justice William Rehnquist Associate Justices William J. Brennan Jr.  · Byron White Thurgood Marshall  · Harry Blac
                      Read more

                      Error while running script in elastic search , gateway timeout

                      Image
                      0 while running script in elastic search, I got 504 Gateway timeout error. { "query": { "bool": { "filter": { "script": { "script": " doc['creted_date'].date.getMonthOfYear() == 12 " } } } }, "aggs": { "test": { "date_histogram": { "field": "creted_date", "interval": "month", "format": "MMM" }, "aggs": { "cost": { "sum": { "field": "cost" } } }
                      Read more

                      Adding quotations to stringified JSON object values

                      Image
                      0 My stringified object data doesn't include quotation marks around object values, which errors when attempting JSON.parse() : '{ "affiliation": CORPORATE, "userId": 75c35d1c-5d12-4485-8fa8-b2f1551a3e6e }' I need the string to be: '{ "affiliation": "CORPORATE", "userId": "75c35d1c-5d12-4485-8fa8-b2f1551a3e6e" }' I'm using this regex to add quotes to the object keys: var newStr = str.replace(/(['"])?([a-z0-9A-Z_]+)(['"])?:/g, '"$2": '); For instance: '{ affiliation: CORPORATE }' to '{ "affiliation": CORPORATE }' There are only string values in my data, so I don't need to check value types. How can I alter my regex expression to add quotations to
                      Read more