BrainStormme

Hello everybody, Hoping someone can help way out of there depth for a complete newbie- trying to set up this flex-box accordion as a menu - (not got to making them clickable yet) But the mobil version doesn't display the full code block - Please help <ul class="codepen"> <li> <div class="section-title"> <h2>About Us</h2> </div> <div class="section-content"> <p>Who, What, Where, <br> When and How.</p> </div> </li> <li class="active"> <div class="section-title"> <h2>Eat</h2> </div> <div class="section-content"> <p>Locally sourced <br> ingredients, <br>prepared with <br> everyone <br> in mind. </p> </div> </li> <li> <div class="section-title"> <h2>Hire</h2> </div> <div class="section-content"> <p>Fully catered venue available for private hire</p> </div> </li> <li> <div class="section-title"> <h2>Contact</h2> </div> <div class="section-content"> <p>Feel free to reach out<br> to us anytime!</p> </div> </li> </ul> <style> ul.codepen { background: #ffff99; display: flex; min-height: 100vh; max-height: 100vh; transform: skewX(10deg); transform-origin: center; margin: 20; padding: 0; overflow: hidden; list-style-type: none; } ul.codepen li { flex: 0; display: flex; align-items: stretch; padding: 10px; background: #ffcc33; cursor: pointer; transition: all 0.5s ease; colour: #cc99ff; } ul.codepen li:hover { background: #cc99ff; colour: #663399; } ul.codepen li.active { flex: 8; padding: 10px; display: flex; align-items: stretch; font-family: 'degular display'; background: #663399; transform: skewX(-10deg); transform-origin: center; cursor: default; } ul.codepen li.active h2 { font-family: 'script'; color: #ffff99; } ul.codepen li.active .section-content { flex: 0.8; opacity: 1; padding: 10px; font-family: 'degular text'; color: #ffff99; } ul.codepen li .section-title { flex: 0.6; display: flex; transform: rotate(-90deg); align-items: center; width: 100%; margin: 0; padding: 10; font-family: 'script'; text-align: center; color: #663399; } ul.codepen li .section-title h2 { margin: 0; white-space: nowrap; color: #ccc99ff;; } ul.codepen li .section-content { flex: 0.8; display: flex; align-items: center; margin: 0; padding: 0; opacity: 0; transition: all 0.25s 0.1s ease-out; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> var section = $('li'); function toggleAccordion() { section.removeClass('active'); $(this).addClass('active'); } section.on('click', toggleAccordion); </script>