Problem: Unable to style tabs, accordions, and dialog boxes differently. for example, formatting one tab affects the other tabs as well. 

Reason:

All the tabs have the same class name i.e., “tab” when inserted on the page. 

All accordions have the same class name i.e., "accordion-container" when inserted on the page. 

All dialog boxes have the same class name i.e., "openModalBtn" when inserted on the page. 

Workaround: 

The workaround for tabs, accordions, and dialog boxes is the same. You need to assign a unique class name to each tab, accordion, and dialog box for the formatting to take effect explicitly. Explained below are the steps for changing the class name of tabs. Apply these steps to accordions, and dialog boxes as well.  

1. Select a tab, and open the style manager by clicking the brush icon 🖌️ given next to the settings icon ⚙️in the toolbar. 

2. Under Classes, click the plus icon ➕and give a new name to the selected tab. For example, “tab1”. 

3. Now, if you set a background color for this tab, it will only take effect on the selected tab i.e., “tab1” in this case.

4. Similarly, you can rename other tabs and style them differently. 

After assigning different class names to different tabs, whenever you select a tab, its given name will appear under Classes. It will help you know which tab is selected at the moment. 

❗Never delete the original class names of tabs, accordions, and dialog boxes.  

Tabs

Accordions

Dialog Boxes