jamesmabrown

Just an update, this has now been resolved. For anyone that wants to do something similar in the future, the full code is here. HTML here <div class="row"> <div class="col"> <h1>Heading here</b></h1> <div class="tabs"> <div class="tab"> <input type="checkbox" id="chck1"> <label class="tab-label" for="chck1"> <h2>Title here. </h2> </label> <div class="tab-content"> <div class="container"> <img src="URL" class="container__image"> <div class="container__text"> <p> Some internal content here. </p> </div> </div> </div> </div> <div class="tab"> <input type="checkbox" id="chck2"> <label class="tab-label" for="chck2"><h2> A title here</h2></label> <div class="tab-content"> <div class="container"> <img src="URL" class="container__image"> <div class="container__text"> <p> Some internal content here. </p> </div> </div> </div> </div> /*CSS here*/ // General input { position: ; opacity: 0; z-index: -1; } // Layout .row { display:flex; .col { flex:1; &:last-child { margin-left: 1em; } } } /* Accordion styles */ .tabs { border-radius: 0px; overflow: hidden; } .tab { width: 100%; color: ; overflow: hidden; &-label { display: flex; padding: 1em; background: ; justify-content: space-between; font-weight: bold; border-bottom: 1px solid #f7b8a1; padding-bottom:20px; cursor: pointer; /* Icon */ &:hover { background: ; } &::after { content: "\276F"; width: 1em; height: 1em; text-align: center; transition: all .35s; } } &-content { max-height: 0; padding: 0 0em; color: ; background: ; transition: all .35s; } &-close { display: flex; justify-content: flex-end; padding: 1em; font-size: 0.75em; background: ; cursor: pointer; &:hover { background: ; } } } // :checked input:checked { + .tab-label { background: ; &::after { transform: rotate(90deg); } } ~ .tab-content { max-height: 150vh; padding-top: 10px; } } .container { &__image { display: inline-block; vertical-align: top; width: 25%; margin-right: 25px; position: relative; min-width: 200px; margin-bottom: 20px; } &__text { display: inline-block; width: 60%; font-size: 1.3em; overflow: visible; @media (max-width: 1000px) { width: 100%; } } }

Partially, though there's still issues. For some reason each dropdown option now scrolls within itself. If you can offer any insight that would be great, but no worries if not!

Hi @tuanphan, Just an update on the above as I have been playing around with it this morning. Increasing the max-height in .tab-content from 100vh to 300vh seems to have solved the overflowing issue. If you can shed any light on the image alignment though that would be greatly appreciated! All best, James

Hi @tuanphan, The HTML is here: <div class="row"> <div class="col"> <h1>OUR TEAM</b></h1> <div class="tabs"> <div class="tab"> <input type="checkbox" id="chck1"> <label class="tab-label" for="chck1"> <h2>Thomas Rose, Co-Founder </h2> </label> <div class="tab-content"> <img src="https://i.ibb.co/ZXt6CVT/Screenshot-2021-01-07-at-17-14-58.png" align=”left” style=”margin: 0px 10px 0px 0px;” width="300px"> Thomas Co-founded P-THREE in 2019 after working as head of Leisure & Restaurants at Cushman & Wakefield for 13 years.<br> Thomas has worked on projects across the UK and Europe including Battersea Power Station, Waterloo.London, Savarin Prague, Potsdamer Platz Berlin, Trocadero Estate, Wembley Park and Kensington Olympia. Thomas has advised private equity groups on over £1billion of acquisitions and retained mandates for Third Space, Wahaca, Rosa’s Thai, Chipotle and Puttshack.<br> Thomas is a member of RICS and a Committee Member of the Leisure Property Forum. </div> </div> <div class="tab"> <input type="checkbox" id="chck2"> <label class="tab-label" for="chck2"><h2> Justin Taylor, Co-Founder</h2></label> <div class="tab-content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. A, in! </div> </div> </div> </div> and the CSS is here: // General input { position: ; opacity: 0; z-index: -1; } // Layout .row { display:flex; .col { flex:1; &:last-child { margin-left: 1em; } } } /* Accordion styles */ .tabs { border-radius: 0px; overflow: hidden; } .tab { width: 100%; color: ; overflow: hidden; &-label { display: flex; justify-content: space-between; padding: 1em; background: ; font-weight: bold; border-bottom: 1px solid #f7b8a1; padding-bottom:20px; cursor: pointer; /* Icon */ &:hover { background: ; } &::after { content: "\276F"; width: 1em; height: 1em; text-align: center; transition: all .35s; } } &-content { max-height: 0; padding: 0 0em; color: ; background: ; transition: all .35s; } &-close { display: flex; justify-content: flex-end; padding: 1em; font-size: 0.75em; background: ; cursor: pointer; &:hover { background: ; } } } // :checked input:checked { + .tab-label { background: ; &::after { transform: rotate(90deg); } } ~ .tab-content { max-height: 100vh; padding-top: 10px; } } Many thanks, James

Hi @tuanphan, There is a link to the site here: https://nectarine-tuba-pgnf.squarespace.com/contact-us-3 PW: PeoplePlacePurpose I have managed to find a solution to it, using HTML and CSS, but have now run in to the issue that it does not scale properly for mobile (i.e. the content cuts off and cannot be scrolled), and I also can't align the IMG within the content without it affecting the rest of the dropdown. Ideally I'd have the image fixed left (or right) with the text flowing next to it. As a reference, I want to try and get this (https://nectarine-tuba-pgnf.squarespace.com/contact-us-5-grid-2) but collapsible. If you can provide any advice it would be greatly appreciated. All best, James

Hello, I'm trying to add an accordion/dropdown to a website (it's still in trial at the moment so can't share web link). It is going to be used on a page showing the team of a company, so within each entry it also needs to include a picture of them. I have used the standard markdown used for an accordion, which by itself (without an image in it) works fine. I have then used an HTML image reference within it, and when it does this, only the first name appears. And when it is opened/clicked, the next name then appears below it (and so forth). But then when you close the top name, they all disappear (apart from the top one). I have also tried created an animated collapsible using HTML, CSS and Java (https://www.w3schools.com/howto/howto_js_collapsible.asp). This code was copied exactly, using a code block for the HTML, adding the CSS into the custom CSS, and adding the Javascript into the page specific code injection. The list options are created, but don't actually open when clicked on. If anyone can provide any insight into how to get either of these solutions to work that would be greatly appreciated. Screenshots are attached for reference. To confirm, I'm using the Henson template. Many thanks, James