.showNextOn()
Categories: UI
.showNextOn( event, selector, number [,hideSelf] )
Subclass: ep
Plugin: ep.fn.showNextOn
Description: Attach an event listener for one or more events to the selected elements. When the event is triggered we show the next siblings in the DOM.
-
.showNextOn( event, selector, number [,hideSelf] )
version added: 6.15.0event One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
selector A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
number The number (default is 1) of (next-inline) siblings to show, when the event is triggered.
hideSelf If true, the selected element is hidden, when the event is triggered.
The .showNextOn()
attaches an event listener for one or more events to the selected elements. When the event is triggered we show the next siblings in the DOM.
-
Show the next two (2nd and 3rd) list elements, when the button inside the first list element is clicked.
HTML:
<ul> <li class="showNextOn"> <button id="clickThisToShowNext2"></button> <button id="clickThisAndNothingHappens"></button> </li> <li class="FirstTest HideElement"> <span class="someStuff"></span> </li> <li class="FirstTest HideElement"> <span class="someStuff"></span> </li> </ul>
CSS:
.HideElement { display: none!important; height: 0; }
Code:
ep('#qunit-fixture li.showNextOn').first().showNextOn( 'click', 'button#clickThisToShowNext2', 2, false );