单击时显示/隐藏多个弹出窗口

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> 

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;
}

Answer 2

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>