why isn't the toggle respected in transition

https://codepen.io/hzk-0210181/pen/qEBqqYq

CodePen

...

11 Replies

Dev_HKOP•4w ago

<div class="wp-block-group page-contact-us-faq-list faq-list">
    <div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained">
        <details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow" style="--content-height: 88px; --summary-height: 67px;" open="">
            <summary>Will I receive the same product that I see in the picture?</summary>
            <p>Yes, the equipment and gear shown in our photos are exactly what you’ll receive upon purchase. We take pride in accurately representing all our surfing products to ensure your complete satisfaction.</p>
        </details>

        <details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow" style="--content-height: 112px; --summary-height: 67px;">
            <summary>Where can I view my sales receipt?</summary>
            <p>Your sales receipt is automatically emailed to you after purchase and can also be accessed in your account under “Order History.” If you need another copy, please contact our customer service team with your order number.</p>
        </details>
        <details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow" style="--content-height: 112px; --summary-height: 67px;">
            <summary>Will you restock items indicated as “out of stock?”</summary>
            <p>Most seasonal surfing equipment marked as “out of stock” will be restocked within 2-4 weeks, though specialty items may take longer. You can sign up for email notifications on product pages to be alerted when specific items become available again.</p>
        </details>
    </div>
</div>

<div class="wp-block-group page-contact-us-faq-list faq-list">
    <div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained">
        <details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow" style="--content-height: 88px; --summary-height: 67px;" open="">
            <summary>Will I receive the same product that I see in the picture?</summary>
            <p>Yes, the equipment and gear shown in our photos are exactly what you’ll receive upon purchase. We take pride in accurately representing all our surfing products to ensure your complete satisfaction.</p>
        </details>

        <details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow" style="--content-height: 112px; --summary-height: 67px;">
            <summary>Where can I view my sales receipt?</summary>
            <p>Your sales receipt is automatically emailed to you after purchase and can also be accessed in your account under “Order History.” If you need another copy, please contact our customer service team with your order number.</p>
        </details>
        <details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow" style="--content-height: 112px; --summary-height: 67px;">
            <summary>Will you restock items indicated as “out of stock?”</summary>
            <p>Most seasonal surfing equipment marked as “out of stock” will be restocked within 2-4 weeks, though specialty items may take longer. You can sign up for email notifications on product pages to be alerted when specific items become available again.</p>
        </details>
    </div>
</div>

function setupFaqList(faqList){
    const detailsEl=faqList.querySelectorAll('details')
    detailsEl.forEach(detail=>{
        const summary=detail.querySelector('summary');
        const content=detail.querySelectorAll('*:not(summary)')
        let contentHeight=0;
        const summaryHeight=summary.scrollHeight;
        content.forEach(el=>contentHeight=contentHeight+el.scrollHeight)
        detail.style.setProperty('--content-height',`${contentHeight}px`);
        detail.style.setProperty('--summary-height',`${summaryHeight}px`);
        let open=false;
        summary.addEventListener('click',()=>{
            if(!open){
                open=!open
            }else{

            }
        })
    });
}

function setupFaqLists(){
    const faqLists=document.querySelectorAll('.faq-list');
    faqLists.forEach((faqList)=>setupFaqList(faqList))
}

function mainExec(){
    setupFaqLists();
}

window.addEventListener('DOMContentLoaded',mainExec)

function setupFaqList(faqList){
    const detailsEl=faqList.querySelectorAll('details')
    detailsEl.forEach(detail=>{
        const summary=detail.querySelector('summary');
        const content=detail.querySelectorAll('*:not(summary)')
        let contentHeight=0;
        const summaryHeight=summary.scrollHeight;
        content.forEach(el=>contentHeight=contentHeight+el.scrollHeight)
        detail.style.setProperty('--content-height',`${contentHeight}px`);
        detail.style.setProperty('--summary-height',`${summaryHeight}px`);
        let open=false;
        summary.addEventListener('click',()=>{
            if(!open){
                open=!open
            }else{

            }
        })
    });
}

function setupFaqLists(){
    const faqLists=document.querySelectorAll('.faq-list');
    faqLists.forEach((faqList)=>setupFaqList(faqList))
}

function mainExec(){
    setupFaqLists();
}

window.addEventListener('DOMContentLoaded',mainExec)

.faq-list{
    width: calc(100% - 4rem);
    padding: 2rem 0;
}
.faq-list details{
    overflow: hidden;
    border-bottom: 1px solid lightgray;
    max-height: calc(var(--summary-height));
    transition: all 0.2s ease-in-out;
}
.faq-list details[open]{
    max-height: calc(var(--content-height) + var(--summary-height));
}
.faq-list summary{
    list-style: none;
    display: flex;
    align-items: center;
    padding: 1rem 0;
    gap: 0.25rem;
    transition: color 0.3s ease-in-out;
}
.faq-list summary:hover{
    color: lightgray;
}
.faq-list summary::after{
    content: '>';
    font-size: 1.5rem;
    transform: rotate(90deg);
    transition: transform 0.2s ease;
}
.faq-list details[open] summary::after{
    transform: rotate(-90deg);
}

.faq-list details *:not(summary){
    opacity: 0;
    padding: 1rem 0;
    color: black;
    display: block;
    max-height: 0;
    transition: opacity 0.2s ease max-height 0.2s ease;
}
.faq-list details[open] *:not(summary){
    opacity: 1;
    display: block;
    max-height: var(--content-height);
}

.faq-list{
    width: calc(100% - 4rem);
    padding: 2rem 0;
}
.faq-list details{
    overflow: hidden;
    border-bottom: 1px solid lightgray;
    max-height: calc(var(--summary-height));
    transition: all 0.2s ease-in-out;
}
.faq-list details[open]{
    max-height: calc(var(--content-height) + var(--summary-height));
}
.faq-list summary{
    list-style: none;
    display: flex;
    align-items: center;
    padding: 1rem 0;
    gap: 0.25rem;
    transition: color 0.3s ease-in-out;
}
.faq-list summary:hover{
    color: lightgray;
}
.faq-list summary::after{
    content: '>';
    font-size: 1.5rem;
    transform: rotate(90deg);
    transition: transform 0.2s ease;
}
.faq-list details[open] summary::after{
    transform: rotate(-90deg);
}

.faq-list details *:not(summary){
    opacity: 0;
    padding: 1rem 0;
    color: black;
    display: block;
    max-height: 0;
    transition: opacity 0.2s ease max-height 0.2s ease;
}
.faq-list details[open] *:not(summary){
    opacity: 1;
    display: block;
    max-height: var(--content-height);
}

ἔρως•4w ago

can you please reduce this further? i cant see any issues with it, and there's way too much code to read to try to see if there's anything wrong

Dev_HKOP•4w ago

i shared the code pen so you can live check

ἔρως•4w ago

yeah, but it's a lot of code and i cant see whats wrong with it it seems to work just fine

Dev_HKOP•4w ago

im sorry

Chris Bolson•4w ago

Transitioning max-height often has unexpected results as, whilst it appears to stop transitioning once it reaches the natural height of the content, the browser continues to transition the max-height value until it reaches the new value. This can can result in the timing appear different when transitioning between values, usually taking longer to "close" than to "open" due to the fact that we have to set a max-height to a value larger than actually required to ensure that all the content is displayed. Also, hard-coding a max-height value isn't really a viable solution as it may be too small for smaller viewports or not enough for large ones. However the issue is here is more due to the way that browsers toggle between "open" and not open states on the <details> element. It is either "open" or "not open". In some ways, is much like toggling between display: block; and display: none; - i.e. there is no in-between state to allow transition. When you initially click on the "summary" text to open the details you do see the transition due to the the content being displayed instantly but the transition delaying the time taken to reach the max height and opacity 1, thus revealing the content bit by bit. However, when closing, it closes instantly so, whilst the transition is happening you can't actually see it as the details content has already closed. Note - as far as I can see, the JavaScript isn't doing anything here that isn't being done by the CSS.

ἔρως•4w ago

i see what you are talking about this is a good case to transition from 0 to auto but that is still pretty new stuff

Dev_HKOP•4w ago

The data inside details Is sett from display auto to display none when toggling the detail? There's a whole page about animating details and it's just ugh

Chris Bolson•4w ago

I don't think that those are the specific properties but basically, yes. It is either open or closed. There is no way currently to animate the details natively, at least not in a cross-browser way. Some methods might work on Chrome but will no doubt fail on other browsers. Of course if you consider this as progressive enhancement (ie "nice to have") then that wouldn't be an issue. Kevin made a video a few months ago as to how this can be achieved on Chrome but even that need(ed) the latest version and with certain developer options being turned on (things may have moved forwards since then). If the animation is important, you may have to look at more tradituonal accordion methods. These are simple to do with CSS alone but of course might not have the "advantages" of using the details element.

Kevin Powell

YouTube

Animate details & summary with a few lines of CSS

If you’ve ever used a details/summary, you’ve definitely wished there was an easy way to animate them opening and closing. Well, thanks to to modern CSS, this is becoming possible! And while browser support isn’t perfect for a lot of this, it’s the perfect example of a progressive enhancement. 🔗 Links ✅ Check out Zoran’s version on his CSS Week...

ἔρως•4w ago

no, it's set from block to none and vice-versa oh, and the contents arent just hidden: they completely stop existing for rendering - almost like an inert element

Chris Bolson•4w ago

Geoff Graham posted an article on CSS Tricks just a couple days ago which has an alternative method to animating the details but again, it only works on Chrome https://css-tricks.com/using-styling-the-details-element/

Gaming

Programming

why isn't the toggle respected in transition

Did you find this page helpful?