Open panel on swipe

By default panels can be closed by swiping in the direction of the open panel. In this demo we show how you can also open a panel with swipe. This is not part of the framework, because in case of multiple panels we wouldn't know which one to open.

The demo page has two menus, one at each side. Both can be opened with swipe or with the buttons in the header.

Open demo

View Source

Homedemos homepage
Introductionintroduction overview getting started
Buttonsbuttons button markup buttonmarkup method anchor link button element
Button widgetform button widget input button submit reset
Checkboxesform checkboxradio widget checkbox input checkboxes controlgroups
Radio buttonsform checkboxradio widget radio input radio buttons controlgroups
Collapsiblecollapsibles content formatting
Dynamic collapsiblesdynamic collapsible set accordion append expand
Collapsible setaccordions collapsible set widget content formatting grouped collapsibles
Controlgroupcontrolgroups selectmenu checkboxradio input grouped buttons horizontal vertical
Dynamic controlgroupsdynamic controlgroup dynamically add buttons
Datepickerform datepicker widget date input
Swipe list itemsswipe to delete list items listviews swipe events
Swipe page navigationswipe to navigate swipe page navigation swipe events
Filterable widgetfilterable filter elements sorting searching listview table
Flipswitch widgetform flipswitch widget flip toggle switch binary select checkbox input
Formsforms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements
Hide labelsform hide labels hidden accessible ui-hidden-accessible forms
Field containersform field containers fieldcontain ui-field-contain forms
Forms disabledforms disabled form elements
Forms galleryforms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements
Gridsgrids columns blocks content formatting rwd responsive css framework
Buttons in gridsbuttons in grids css framework
Custom responsive gridscustom responsive grids rwd css framework
Grouping and dividing contentblocks content formatting sections heading
Iconsbutton icons svg disc alt custom icon position
Grunticon loader
Listviewlistview widget thumbnails icons nested split button collapsible ul ol
Listview autocompleteautocomplete filterable reveal listview filtertextbeforefilter placeholder
Listview autocomplete remote dataautocomplete filterable reveal listview remote data filtertextbeforefilter placeholder
Listview autodividers linkbarautodividers anchor jump scroll linkbars listview lists ul ol
Listview autodividers selectorlistview autodividers selector autodividersselector lists ul ol
Nested Listviewslistview nested list items
Listview collapsible list items (flat)listview collapsible list items flat
Listview collapsible list items (indented)listview collapsible list indented
Listview responsive gridgrid listview responsive grids responsive listviews lists ul
Loader widgetloader widget page loading navigation overlay spinner
Navbar widgetnavbar widget navmenu toolbars header footer
Navigationajax navigation navigate widget history event method
Linking pageslinking pages page links navigation ajax prefetch cache
Hash processing demonavigation redirection hash query
Page Navigation Eventsnavigation redirection hash query
Pagespages page widget ajax navigation
Single pagesingle page
Multi-page templatemultipage multi-page page
Dialog pagedialog page widget modal popup
Panelpanel widget sliding panels reveal push overlay responsive
External panels
Fixed panelspanel
Panels responsivepanel slide panels sliding panels shadow rwd responsive breakpoint
Custom panel stylepanel custom style custom panel width reveal shadow listview panel styling page background wrapper
Panel open on swipepanel open on swipe
Panel external and internalpanels outside page internal external toolbars
Popuppopup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition
Popup alignmentpopup alignment position
Popup arrow sizepopup arrow size popups popover
Dynamic popupsdynamic popups popup images lightbox
Popups with iframespopups with iframes scaling
Popup image scalingpopup image scaling
Popup outside multi-pageexternal popup outside multi-page
Rangeslider widgetform rangeslider widget dual sliders dual handle sliders range input
Responsive Web Designresponsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries
Selectmenuform selectmenu widget select input custom select menu selects
Custom select menuform custom select menu selectmenu widget custom menu option optgroup multiple selects
Custom select menu with filterfilterable select filter popup dialog
Sliderform slider widget range input single sliders
Slider flip toggle switchform slider widget flipswitch slider binary select flip toggle switch
Slider tooltipform slider tooltip handle value input range sliders
Table Column Toggletable widget reflow column toggle th td responsive tables rwd hide show tabular
Table Column Toggle demotable column toggle phone comparison demo
Table Column Toggle heading groupsresponsive tables table column toggle heading groups rwd breakpoint
Table Column Toggle optionsresponsive tables table column toggle hide rwd breakpoint customization options
Table Reflowtable reflow th td responsive rwd columns tabular
Table Reflow heading groupsresponsive tables table reflow heading groups rwd breakpoint
Table Reflow stripes and strokesresponsive tables table reflow stripes strokes table style
Table Reflow custom stylesresponsive tables table reflow stack custom styles
Tabs widgetui tabs widget
Textinput widgetform textinput widget text input textarea number date time tel email file color password
Default themedefault theme swatches theming style css
Classic themeclassic theme old theme swatches theming style css
Toolbartoolbar widget header footer toolbars fixed fullscreen external sections
Dynamic toolbarsdynamic toolbars dynamically add toolbar header footer
External toolbarsexternal toolbars header footer
Fixed toolbarsfixed toolbars header footer
Fullscreen toolbarsfixed fullscreen toolbars header footer
Fixed external toolbarsexternal fixed toolbars header footer
Persistent toolbarsexternal persistent toolbars header footer navbar navmenu
Ajax optimized toolbarsexternal ajax optimized toolbars persistent toolbars header footer navbar
Form in toolbarform in toolbars header footer
Transitionspage transitions animated pages popup navigation flip slide fade pop
Backbone RequireJSbackbone requirejs navigation router
Google Maps geolocationgoogle maps geolocation demo
Google Maps list togglegoogle maps hybrid

Swipe left or right

Open left panel Open right panel

Swipe verb: 1. to strike or move with a sweeping motion

Back to demo intro

Left reveal panel.

Right push panel.

Open panel on swipe

Checkboxradio widget click to expand contents

Collapsible (set) widget click to expand contents

Controlgroup widget click to expand contents

Events click to expand contents

Forms click to expand contents

Grids click to expand contents

Icons click to expand contents

Listview widget click to expand contents

Navigation click to expand contents

Pages click to expand contents

Panel widget click to expand contents

Popup widget click to expand contents

Selectmenu widget click to expand contents

Slider widget click to expand contents

Table widget click to expand contents

Theming click to expand contents

Toolbar widget click to expand contents

3rd party API demos click to expand contents

Swipe left or right

loading