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.
#Jquery showhide function code
You 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. The jQuery show() method is discussed in-depth in this guide along with examples that illustrate the usage of the different show() method parameters.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. The jQuery show() method exhibits three parameters which are speed, easing, and callback. It shows only those elements that are hidden using either jQuery hide() method, or the CSS display property. The jQuery show() method is used for the purpose of showing the hidden elements. The callback parameter is working properly. OutputĪfter you click on the first button to hide the heading.Īfter you click on the second button to show the heading. Once the hide() and show() methods are called, an alert message will also appear confirming the successful execution of both the methods. In the above code snippet, along with the speed parameter we have also passed the callback parameter.
Alert ( "Hide() method successfully completed!" ) Īlert ( "Show() method successfully completed!" )
0 kommentar(er)
