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

                      Danny Elfman

                      Image
                      Danny Elfman From Wikipedia, the free encyclopedia Jump to navigation Jump to search Danny Elfman Elfman at the 2010 San Diego Comic-Con Born Daniel Robert Elfman ( 1953-05-29 ) May 29, 1953 (age 65) Los Angeles, California, U.S. Spouse(s) Bridget Fonda ( m.  2003) Children 1 Musical career Genres Rock [1] ska [2] new wave film music video game music Occupation(s) Composer, singer, songwriter, record producer Instruments Trombone guitar percussion vocals keyboards [3] Years active 1972–present Associated acts Oingo Boingo James Newton Howard Daniel Robert Elfman (born May 29, 1953) is an American composer, singer, songwriter, and record producer. Elfman first became known for being the lead singer and songwriter for the band Oingo Boingo from 1974 to 1995. He is well known for scoring films and television shows, particularly his frequent collabora
                      Read more

                      Retrieve a Users Dashboard in Tumblr with R and TumblR. Oauth Issues

                      Image
                      .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } 0 I am trying to use the TumblR package in R to set up the Oauth Authentication to Retrieve a user's dashboard using the second example in tumblR documentation However I get the following error, it seems that using twitter others have been able to use a different function to get around this, but I am not finding the same function available for Tumblr. See twitter package for R authentication: error 401 My code consumer_key <- OKey consumer_secret <- SKey appname <- App_name tokenURL <- 'http://www.tumblr.com/oauth/request_token' accessTokenURL <- 'http://www.tumblr.com/oauth/acces_token'
                      Read more