Preserve div state on postback

When i do a page postback the div closes and i no longer able to open div again on button click ?
I have included relevant code for your convenience.

content

.content {
padding: 0 18px;
max-height: 0px;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}

use this

Your handler

now use the above generic handler, adding the Event Listeners to all the collapsible elements

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh4y ago
Accepted answer
use this
addCustomEventListener: function (selector, event, handler) {
        let rootElement = document.querySelector('body');
        //since the root element is set to be body for our current dealings
        rootElement.addEventListener(event, function (evt) {
                var targetElement = evt.target;
                while (targetElement != null) {
                    if (targetElement.matches(selector)) {
                        handler(evt);
                        return;
                    }
                    targetElement = targetElement.parentElement;
                }
            },
            true
        );
    }
Your handler
function clickHandler()
{
    this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.maxHeight) {
                content.style.maxHeight = null;
            } else {
                content.style.maxHeight = content.scrollHeight + "px";
            }
        });
}
now use the above generic handler, adding the Event Listeners to all the collapsible elements
addCustomEventListener('.collapsible','click',clickHandler);
0
Srinivasan Ramamoorthi4y ago
Try option 1 and 2 mentioend in this link

https://stackoverflow.com/questions/30523370/javascript-expand-collapse-button
0