> ## Documentation Index
> Fetch the complete documentation index at: https://doc.lucidworks.com/llms.txt
> Use this file to discover all available pages before exploring further.
# slide:toggle
export const LwTemplate = ({title = "Key questions to get you started", icon = "sparkles", cta = "Powered by Agent Studio", linkHref = "https://lucidworks.com/demo/?utm_source=docs&utm_medium=referral&utm_campaign=docs_cta_ai"}) => {
const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
const timer = setTimeout(() => {
setIsLoaded(true);
}, 500);
return () => clearTimeout(timer);
}, []);
return
{isLoaded && `
}} />}
Powered by Lucidworks Agent Studio
;
};
[localhost link]: http://localhost:3000/docs/4/app-studio/reference/tags/lightning.directive.slideToggle
[mintlify link]: https://doc.lucidworks.com/docs/4/app-studio/reference/tags/lightning.directive.slideToggle
[old doc.lw link]: https://doc.lucidworks.com/app-studio/4.2/1183
## Description
The toggle panes directive
## Usage
as attribute
```xml wrap theme={"dark"}
...
```
### Directive info
* This directive creates new scope.
#### Parameters
| Param | Type | Details |
| ------ | ---------- | ------------------------------------ |
| target | **string** | CSS selector to get slidable element |
## Example
#### Source
```xml wrap theme={"dark"}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci deserunt, doloremque ducimus enim nemo officia pariatur quibusdam quos ratione suscipit, tempora temporibus voluptatem. Ea eveniet incidunt magni minus quaerat.
Ad adipisci deserunt, doloremque ducimus enim nemo officia pariatur quibusdam quos ratione suscipit, tempora temporibus voluptatem. Ea eveniet incidunt magni minus quaerat.
