Я хочу создать прокручивающийся выпадающий div, когда пользователь нажимает кнопку

Question

Я хочу создать раскрывающийся список, но выпадающим списком должен быть div с несколькими страницами внутри него. При щелчке правой, левой иконки должна появиться новая страница. См. Прилагаемый скриншот.

Answer 1

проверить это Jsfiddle: https://jsfiddle.net/aaodtoh6/4/

HTML:

<div id="cel-screen"> 
    <a href="javascript:void(0)" onclick="toggleColorlib()" id="colorbt">Color Buttons</a> 
    <div id="color-lib"> 
    <ul> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
     <li>Color</li> 
    </ul> 
    </div> 
</div> 

CSS:

#cel-screen {width:400px; height:650px; border:1px solid gold; position:relative} 
#colorbt {position:absolute; bottom:0; right:0;} 
#color-lib {background:#25d396;width:50%; height:250px; overflow-x:hidden; overflow-y:auto; position:absolute; bottom:15px; right:0; display:none;} 

JS:

function toggleColorlib() { 
    var element = document.getElementById('color-lib'), 
    style = window.getComputedStyle(element), 
    display = style.getPropertyValue('display'); 
    if(display == "none"){ 
      document.getElementById('color-lib').style.display = "block"; 
    } else { 
     document.getElementById('color-lib').style.display = "none"; 
    } 
} 

Используя javascript, чтобы это произошло, посмотрите, работает ли оно для вас.