How to make a smooth opening of Toggle in Oxygen

Webdesign

The standard component „Toggle“ in Oxygen does not have the ability to adjust the smooth disclosure of hidden content and when you click the panel opens instantly.

Depending on the design and concept of your site, it may sometimes be necessary to smooth the opening of sliding panels. With a little css code we can do this. You can see an example below.

Step 1

Select the container that hosts the hidden content and assign it an additional t-flow class (see the screenshot below). If you have already created multiple panels, assign this class to the containers of each Toogle content.

IMPORTANT: this method will work only if the block of hidden content is placed below the open Toggle button and placed in close proximity to the button. An example of the required structure can be seen in the screenshot above.

Step 2

Now you need to add css code. If you need the effect only on this page, then add the standard element „Code Block“ to the page and in its section „Advanced > CSS“ insert the following code, then click „Apply Code“ and save the changes on the page:

.t-flow {
   display: flex!important;
   height: auto;
   min-height: 0;
   max-height: 0;
   padding-top: 0;
   padding-bottom: 0;
   overflow: hidden;
   transition: max-height 0.7s ease-in-out, padding 0.7s ease-in-out;
}
.oxy-toggle[class*=expanded] + .t-flow {
    max-height: 100px;
    padding-top:20px;
    padding-bottom:20px;
}

Now the hidden content will open smoothly. You can change the name of the class at your discretion, as well as changing the values of max-height , padding-top, padding-bottom and transition: max-height can achieve the desired result. For example, to make the disclosure even smoother, set the max-height 1.5s ease-in-out, padding 1.5s ease-in-out (value to 1.5s). The higher the value, the smoother the disclosure.

If you want to have this effect of smooth opening of Toggle on all pages of the site, the css code is not required to add to the Code Block, and in the Stylesheets section of the site settings in the Oxygen editor. How this is done can be found in the official documentation.

 

Recommended for you