# Toggle .active state in CSS Stylesheet

**URL:** <https://forum.inductiveautomation.com/t/toggle-active-state-in-css-stylesheet/73420>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [May 8, 2023, 3:55pm UTC](https://forum.inductiveautomation.com/t/toggle-active-state-in-css-stylesheet/73420 "2023-05-08T15:55:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![markusx1094](https://avatars.discourse-cdn.com/v4/letter/m/77aa72/32.png) [@markusx1094](https://forum.inductiveautomation.com/u/markusx1094)\
**Post date:** [May 8, 2023, 3:55pm UTC](https://forum.inductiveautomation.com/t/toggle-active-state-in-css-stylesheet/73420/1 "2023-05-08T15:55:01Z")

</div>

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?

> **[Ignition Exchange](https://inductiveautomation.com/exchange/2463/overview)**
>
> Discover, share, and download community made Ignition resources in collaboration with your organization or the Ignition community.

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);  
> }

---

<div class="post-metadata">

**Author:** ![danieltalbot](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/danieltalbot/32/11201_2.png) [@danieltalbot](https://forum.inductiveautomation.com/u/danieltalbot)\
**Post date:** [May 8, 2023, 7:53pm UTC](https://forum.inductiveautomation.com/t/toggle-active-state-in-css-stylesheet/73420/2 "2023-05-08T19:53:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![markusx1094](https://avatars.discourse-cdn.com/v4/letter/m/77aa72/32.png) [@markusx1094](https://forum.inductiveautomation.com/u/markusx1094)\
**Post date:** [May 8, 2023, 7:58pm UTC](https://forum.inductiveautomation.com/t/toggle-active-state-in-css-stylesheet/73420/3 "2023-05-08T19:58:39Z")

</div>

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;  
> }

---

<div class="post-metadata">

**Author:** ![danieltalbot](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/danieltalbot/32/11201_2.png) [@danieltalbot](https://forum.inductiveautomation.com/u/danieltalbot)\
**Post date:** [May 8, 2023, 8:02pm UTC](https://forum.inductiveautomation.com/t/toggle-active-state-in-css-stylesheet/73420/4 "2023-05-08T20:02:18Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![danieltalbot](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/danieltalbot/32/11201_2.png) [@danieltalbot](https://forum.inductiveautomation.com/u/danieltalbot)\
**Post date:** [May 8, 2023, 8:07pm UTC](https://forum.inductiveautomation.com/t/toggle-active-state-in-css-stylesheet/73420/5 "2023-05-08T20:07:26Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/d/fd527abecf13cd2096222d89111d3b64b92b5020.png)

---

<div class="post-metadata">

**Author:** ![markusx1094](https://avatars.discourse-cdn.com/v4/letter/m/77aa72/32.png) [@markusx1094](https://forum.inductiveautomation.com/u/markusx1094)\
**Post date:** [May 8, 2023, 10:20pm UTC](https://forum.inductiveautomation.com/t/toggle-active-state-in-css-stylesheet/73420/6 "2023-05-08T22:20:21Z")

</div>

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.