• WE ARE MOVING

    Visit our new demos website powered by SharePoint and ShortPoint.

  • LET’S GO!


Toggle – Basic Usage

Toggle 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel dapibus turpis. Etiam viverra dolor ante, eget interdum arcu mollis in. Nam eu feugiat tortor. Integer sed sagittis arcu. Donec venenatis neque eget dolor porta, non vestibulum massa posuere. Etiam pellentesque, libero non eleifend scelerisque, lacus ipsum lacinia ipsum, ut vulputate orci tortor ut elit. Nullam vitae diam velit.
Toggle 2
In accumsan risus sed tortor dignissim, nec vehicula arcu dapibus. Ut pellentesque eget lacus quis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris tortor lorem, tempor non justo id, mollis ornare mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc venenatis a justo a vehicula. Phasellus accumsan ultricies dolor, at accumsan sapien lobortis tincidunt. Proin pulvinar sit amet diam ut commodo.
Toggle 3
Nam id vehicula turpis. Donec vel ante placerat, suscipit quam ac, ultrices lacus. Donec dolor risus, laoreet non massa sed, fermentum viverra libero. Curabitur a ante nulla. Aliquam ultrices, elit vel ultrices sollicitudin, dui lectus sagittis sapien, id euismod dui lorem nec massa. Integer sed sem molestie, convallis purus ac, pharetra arcu. Aliquam nec blandit justo, a lobortis lectus. Praesent euismod, tortor id dapibus fringilla, turpis augue malesuada erat, non cursus ante augue sed justo. Phasellus sit amet consectetur justo. Quisque tincidunt euismod rhoncus. Sed varius massa vitae magna lobortis, non condimentum justo ullamcorper.

Toggle – Without Divider

Toggle 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel dapibus turpis. Etiam viverra dolor ante, eget interdum arcu mollis in. Nam eu feugiat tortor. Integer sed sagittis arcu. Donec venenatis neque eget dolor porta, non vestibulum massa posuere. Etiam pellentesque, libero non eleifend scelerisque, lacus ipsum lacinia ipsum, ut vulputate orci tortor ut elit. Nullam vitae diam velit.
Toggle 2
In accumsan risus sed tortor dignissim, nec vehicula arcu dapibus. Ut pellentesque eget lacus quis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris tortor lorem, tempor non justo id, mollis ornare mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc venenatis a justo a vehicula. Phasellus accumsan ultricies dolor, at accumsan sapien lobortis tincidunt. Proin pulvinar sit amet diam ut commodo.
Toggle 3
Nam id vehicula turpis. Donec vel ante placerat, suscipit quam ac, ultrices lacus. Donec dolor risus, laoreet non massa sed, fermentum viverra libero. Curabitur a ante nulla. Aliquam ultrices, elit vel ultrices sollicitudin, dui lectus sagittis sapien, id euismod dui lorem nec massa. Integer sed sem molestie, convallis purus ac, pharetra arcu. Aliquam nec blandit justo, a lobortis lectus. Praesent euismod, tortor id dapibus fringilla, turpis augue malesuada erat, non cursus ante augue sed justo. Phasellus sit amet consectetur justo. Quisque tincidunt euismod rhoncus. Sed varius massa vitae magna lobortis, non condimentum justo ullamcorper.

Toggle – Icon Location

Toggle 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel dapibus turpis. Etiam viverra dolor ante, eget interdum arcu mollis in. Nam eu feugiat tortor. Integer sed sagittis arcu. Donec venenatis neque eget dolor porta, non vestibulum massa posuere. Etiam pellentesque, libero non eleifend scelerisque, lacus ipsum lacinia ipsum, ut vulputate orci tortor ut elit. Nullam vitae diam velit.
Toggle 2
In accumsan risus sed tortor dignissim, nec vehicula arcu dapibus. Ut pellentesque eget lacus quis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris tortor lorem, tempor non justo id, mollis ornare mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc venenatis a justo a vehicula. Phasellus accumsan ultricies dolor, at accumsan sapien lobortis tincidunt. Proin pulvinar sit amet diam ut commodo.
Toggle 3
Nam id vehicula turpis. Donec vel ante placerat, suscipit quam ac, ultrices lacus. Donec dolor risus, laoreet non massa sed, fermentum viverra libero. Curabitur a ante nulla. Aliquam ultrices, elit vel ultrices sollicitudin, dui lectus sagittis sapien, id euismod dui lorem nec massa. Integer sed sem molestie, convallis purus ac, pharetra arcu. Aliquam nec blandit justo, a lobortis lectus. Praesent euismod, tortor id dapibus fringilla, turpis augue malesuada erat, non cursus ante augue sed justo. Phasellus sit amet consectetur justo. Quisque tincidunt euismod rhoncus. Sed varius massa vitae magna lobortis, non condimentum justo ullamcorper.

Toggle – Different Colors

Color Danger

Toggle 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel dapibus turpis. Etiam viverra dolor ante, eget interdum arcu mollis in. Nam eu feugiat tortor. Integer sed sagittis arcu. Donec venenatis neque eget dolor porta, non vestibulum massa posuere. Etiam pellentesque, libero non eleifend scelerisque, lacus ipsum lacinia ipsum, ut vulputate orci tortor ut elit. Nullam vitae diam velit.
Toggle 2
In accumsan risus sed tortor dignissim, nec vehicula arcu dapibus. Ut pellentesque eget lacus quis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris tortor lorem, tempor non justo id, mollis ornare mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc venenatis a justo a vehicula. Phasellus accumsan ultricies dolor, at accumsan sapien lobortis tincidunt. Proin pulvinar sit amet diam ut commodo.
Toggle 3
Nam id vehicula turpis. Donec vel ante placerat, suscipit quam ac, ultrices lacus. Donec dolor risus, laoreet non massa sed, fermentum viverra libero. Curabitur a ante nulla. Aliquam ultrices, elit vel ultrices sollicitudin, dui lectus sagittis sapien, id euismod dui lorem nec massa. Integer sed sem molestie, convallis purus ac, pharetra arcu. Aliquam nec blandit justo, a lobortis lectus. Praesent euismod, tortor id dapibus fringilla, turpis augue malesuada erat, non cursus ante augue sed justo. Phasellus sit amet consectetur justo. Quisque tincidunt euismod rhoncus. Sed varius massa vitae magna lobortis, non condimentum justo ullamcorper.

Color Green

Toggle 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel dapibus turpis. Etiam viverra dolor ante, eget interdum arcu mollis in. Nam eu feugiat tortor. Integer sed sagittis arcu. Donec venenatis neque eget dolor porta, non vestibulum massa posuere. Etiam pellentesque, libero non eleifend scelerisque, lacus ipsum lacinia ipsum, ut vulputate orci tortor ut elit. Nullam vitae diam velit.
Toggle 2
In accumsan risus sed tortor dignissim, nec vehicula arcu dapibus. Ut pellentesque eget lacus quis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris tortor lorem, tempor non justo id, mollis ornare mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc venenatis a justo a vehicula. Phasellus accumsan ultricies dolor, at accumsan sapien lobortis tincidunt. Proin pulvinar sit amet diam ut commodo.
Toggle 3
Nam id vehicula turpis. Donec vel ante placerat, suscipit quam ac, ultrices lacus. Donec dolor risus, laoreet non massa sed, fermentum viverra libero. Curabitur a ante nulla. Aliquam ultrices, elit vel ultrices sollicitudin, dui lectus sagittis sapien, id euismod dui lorem nec massa. Integer sed sem molestie, convallis purus ac, pharetra arcu. Aliquam nec blandit justo, a lobortis lectus. Praesent euismod, tortor id dapibus fringilla, turpis augue malesuada erat, non cursus ante augue sed justo. Phasellus sit amet consectetur justo. Quisque tincidunt euismod rhoncus. Sed varius massa vitae magna lobortis, non condimentum justo ullamcorper.

Toggle – Custom Icons

Toggle 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel dapibus turpis. Etiam viverra dolor ante, eget interdum arcu mollis in. Nam eu feugiat tortor. Integer sed sagittis arcu. Donec venenatis neque eget dolor porta, non vestibulum massa posuere. Etiam pellentesque, libero non eleifend scelerisque, lacus ipsum lacinia ipsum, ut vulputate orci tortor ut elit. Nullam vitae diam velit.
Toggle 2
In accumsan risus sed tortor dignissim, nec vehicula arcu dapibus. Ut pellentesque eget lacus quis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris tortor lorem, tempor non justo id, mollis ornare mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc venenatis a justo a vehicula. Phasellus accumsan ultricies dolor, at accumsan sapien lobortis tincidunt. Proin pulvinar sit amet diam ut commodo.
Toggle 3
Nam id vehicula turpis. Donec vel ante placerat, suscipit quam ac, ultrices lacus. Donec dolor risus, laoreet non massa sed, fermentum viverra libero. Curabitur a ante nulla. Aliquam ultrices, elit vel ultrices sollicitudin, dui lectus sagittis sapien, id euismod dui lorem nec massa. Integer sed sem molestie, convallis purus ac, pharetra arcu. Aliquam nec blandit justo, a lobortis lectus. Praesent euismod, tortor id dapibus fringilla, turpis augue malesuada erat, non cursus ante augue sed justo. Phasellus sit amet consectetur justo. Quisque tincidunt euismod rhoncus. Sed varius massa vitae magna lobortis, non condimentum justo ullamcorper.

Toggle – Open By Default

Toggle 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel dapibus turpis. Etiam viverra dolor ante, eget interdum arcu mollis in. Nam eu feugiat tortor. Integer sed sagittis arcu. Donec venenatis neque eget dolor porta, non vestibulum massa posuere. Etiam pellentesque, libero non eleifend scelerisque, lacus ipsum lacinia ipsum, ut vulputate orci tortor ut elit. Nullam vitae diam velit.
Toggle 2
In accumsan risus sed tortor dignissim, nec vehicula arcu dapibus. Ut pellentesque eget lacus quis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris tortor lorem, tempor non justo id, mollis ornare mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc venenatis a justo a vehicula. Phasellus accumsan ultricies dolor, at accumsan sapien lobortis tincidunt. Proin pulvinar sit amet diam ut commodo.
Toggle 3
Nam id vehicula turpis. Donec vel ante placerat, suscipit quam ac, ultrices lacus. Donec dolor risus, laoreet non massa sed, fermentum viverra libero. Curabitur a ante nulla. Aliquam ultrices, elit vel ultrices sollicitudin, dui lectus sagittis sapien, id euismod dui lorem nec massa. Integer sed sem molestie, convallis purus ac, pharetra arcu. Aliquam nec blandit justo, a lobortis lectus. Praesent euismod, tortor id dapibus fringilla, turpis augue malesuada erat, non cursus ante augue sed justo. Phasellus sit amet consectetur justo. Quisque tincidunt euismod rhoncus. Sed varius massa vitae magna lobortis, non condimentum justo ullamcorper.

Toggle ShortPoint Options

Option Value Default Description
title “text” Required! Toggle title
no-divider Divider will not be displayed for the toggle
right Icon location will be on the right
left
  • Icon location will be on the left
  • Useful in RTL sites
color color name primary
  • the active toggle color and hover style
  • all colors available at ShortPoint Colors page
open
  • Toggle will be open by default
  • If used in toggles, all will be open
icon-open icon name icon-plus-square-o
icon-open icon name icon-minus-square-o
Do you know! That you can spread toggles in your page and control their behavior using toggles grouping shortpoint.