Toggle .active state in CSS Stylesheet

Ignition
1

Currently I am using this Ignition Exchange side nav and want it to work using an onClick toggle rather than a :hover state. I tried using the :active selector as well but that just made it so it only worked when I was pressing and holding. From what I can tell this is usually done through an event listener in Javascript that toggles an .active state on the class. Is there a way to toggle that state through a script on the root container or possibly another way to do this that I am missing?

This is the CSS code being used.

/* Docked Navigation Styles */
.docked-view-left {
width: auto !important;
height: auto;
}

.psc-nav {
width: 70px;
transition: width 0.2s ease-in-out;
}

.psc-nav-section {
max-height: 48px;
color: var(--neutral-70);
transition: max-height 0.2s ease-in, color 0.2s ease-in-out;
}

.psc-nav-section-arrow,
.psc-nav-link {
opacity: 0;
color: var(--neutral-70);
transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* hover events */

.psc-nav:hover {
width: 250px;
}

.psc-nav:hover .psc-nav-section-arrow,
.psc-nav:hover .psc-nav-link {
opacity: 1;
}

.psc-nav-section:hover {
max-height: 1000px;
color: var(--callToAction);
transition: max-height 0.6s ease-in-out, color 0.2s ease-in-out;
}

.psc-nav-section:hover .psc-nav-section-header .psc-nav-link,
.psc-nav-link:hover {
color: var(--callToAction);
}

.psc-nav-section:hover .psc-nav-section-arrow {
transform: rotate(90deg);
}

2

One way that I have used to accomplish this with a button to expand / collapse the nav and have it lock open is by binding the style class for the nav container to a session custom property. Clicking the button toggles the session custom property and then the binding toggles between a style class I set up for an expanded nav and the regular nav class.

3

Oh so rather than having a class state like .psc-nav.active you would do something like this and just have a custom interaction toggle between the two styles?

.psc-nav {
width: 70px;
transition: width 0.2s ease-in-out;
}
.psc-nav-open {
width: 250px;
}

4

Yep! You may also want to add some extra rules to the css for things like:

.psc-nav-open .psc-nav-section-arrow,
.psc-nav-open .psc-nav-link {
opacity: 1;
}
5

Just double-checked. I also used the alterDock() function when toggling the session custom property.

image
image994×459 44.8 KB

6

I ended up using the root container of the dock to expand the dock through the CSS stylesheet by using a session property like you suggested. I then put event listeners on my header and pages to close the dock if they are clicked. It works like a charm, thanks for leading me in the right direction.

1 Like