without closing this one) by holding the ctrl or cmd key. switching to another section will close the currently visible one, a user can also open sections in addition to the currently open one (i.e. While normally only one section of the accordion is visible, i.e. This accordion also supports multi-selection. It builds upon the main showOrHideSection() functions, inheriting features like accessibility, visibility state submission in a form, auto-scrolling etc. This plug-in bundle also contains a separate script file which you may include in order to build an accordion. SHOWHIDE SOFTWARE CODEYou simply write your starting text and assign a special CSS class to that, as well as the remainder text, also flagged by a special class, and with some rather short JavaScript code (using the appendMoreLinks() plug-in) the remainder sections get hidden, more… links get appended to the headers and whenever a user clicks on such a more… link, it will be removed and the hidden remainder text will be shown instead. So if you want to present text blocks with an always-visible start (perhaps the first paragraph) and an initially hidden rest, which the user can reveal by simply clicking on a link labelled something like more…, than there's a simple plug-in for that.In addition to these main functions, this tool bundle contains several more jQuery plug-in functions for even more specific showing or hiding actions (building upon the main functions). In this case, simply add an input element (like an ) for each hideable section and configure these plug-ins to that the input's value gets auto-updated with each showSection() or hideSection() action. Maybe you are designing a form for a web application with some hideable sections (like an “accordeon”) and you want to transmit the visibility state of each hideable section with each form submit (as part of the form data), in order for your web application to be able to construct a response page corresponding to that state.By the way: The functions internally used for this viewport alignment are not private, but also implemented as jQuery plug-in functions, so you may also use this plug-in bundle for your own viewport alignment purposes.You may optionally activate an autoscroll feature to ensure that a section which gets shown (or at least its beginning) will be readable, i.e.This is also a feature of these plug-in functions. For accessible web you should also consider using aria attributes on toggle elements (clickable by the user in order to toggle a section's visibility) which enable a screen reader to read out the current state (collapesed/hidden or expanded/visible) when the toggle is focused.The show/hideSection() functions may now automatically add or remove class names from the state display element's class attribute, so the visibility display gets automatically updated (according CSS required).Arrow icons like these, which switch state with a smooth transition, may be created with my separate jQuery plug-in jquery-folding-arrow-icon.This might be, for example, an arrow icon pointing to the right while the corresponding section is hidden and pointing downwards while the section is visible. So you may define an always visible element for each hideable element which reflects the current visibility state.In addition to the aforementioned jQuery-functions, they sport several (optional) features accompanying the showing or hiding action. The main functions of this bundle are showSection(), hideSection() and showOrHideSection(). These tools center around the same functionality: Selecting one or more elements by a query ( $(selector)) and calling a similar function for showing or hiding the selected elements. Users of jQuery may already use the show() and hide() functions of a jQuery resultset in order to toggle the visibility of the selected elements. Bundle of jQuery Plug-ins for dynamically and animatedly showing or hiding website content with features like toggling control states or scrolling shown content into view. Set the control as aria-expanded="true".Place the control (button) within the panel.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |