IO-Docs Tricks
You can style an IO-Docs method differently when it's expanded than when it's collapsed.
To make it work, you need to use a [JavaScript Event Hook](/docs/read/your_portal/layout_and_design/Event_Hooks) to add a class to the expanded or collapsed method, and some CSS to change the style.
**JavaScript**
```js
// Add active class to method
document.addEventListener('portalIODocsShowMethod', function (event) {
event.target.closest('.method').classList.add('method-active');
}, false);
// Remove active class from method
document.addEventListener('portalIODocsHideMethod', function (event) {
event.target.closest('.method').classList.remove('method-active');
}, false);
```
**CSS**
```css
.method {
/* Base styles */
}
.method.method-active {
/* Modified styles */
}
```
Docs Navigation
- API Documentation Portal
- IO Docs Definition
- Mashery API Documentation
- Mashery 3.0 API Guide
- Mashery 2.0 API Guide
- OAuth Supporting Methods
- Examples
- JSON RPC
- Authentication
- API Objects
- Fetching Objects
- Query Language
- Creating Objects
- Updating Objects
- Validating Fields
- Deleting Objects
- Applications
- General Object Methods
- Members
- Packages
- Plans
- Package Keys
- Keys
- Developer Classes
- Services
- Roles
- Mashery 2.0 Reporting API Guide
- Event Trigger API
- Differences between Roles and Portal Access Groups
- Managing a Portal Access Group Using Mashery V2 or V3 API
- Mashery Reporting Event Post API Guide
- Tips and Tricks
- Your Portal
- API Traffic Manager
- I/O Docs WSDL requirements