|
|
@@ -0,0 +1,37 @@
|
|
|
+{% comment %}
|
|
|
+Licensed to Cloudera, Inc. under one
|
|
|
+or more contributor license agreements. See the NOTICE file
|
|
|
+distributed with this work for additional information
|
|
|
+regarding copyright ownership. Cloudera, Inc. licenses this file
|
|
|
+to you under the Apache License, Version 2.0 (the
|
|
|
+"License"); you may not use this file except in compliance
|
|
|
+with the License. You may obtain a copy of the License at
|
|
|
+
|
|
|
+ http://www.apache.org/licenses/LICENSE-2.0
|
|
|
+
|
|
|
+Unless required by applicable law or agreed to in writing, software
|
|
|
+distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
+See the License for the specific language governing permissions and
|
|
|
+limitations under the License.
|
|
|
+{% endcomment %}
|
|
|
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
|
+<html>
|
|
|
+ <head>
|
|
|
+ <title>Data Group Toggle</title>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div class="jframe_padded">
|
|
|
+ This is a DataGroupToggle. As you select from the list, different combinations of elements will appear.
|
|
|
+ <select data-filters="DataGroupToggle">
|
|
|
+ <option data-group-toggle="{'group': '.group'}">None</option>
|
|
|
+ <option data-group-toggle="{'group': '.group', 'show': '.one'}">One</option>
|
|
|
+ <option data-group-toggle="{'group': '.group', 'show': '.one, .two'}">One and Two</option>
|
|
|
+ <option data-group-toggle="{'group': '.group', 'show': '.one, .three'}">One and Three</option>
|
|
|
+ </select>
|
|
|
+ <span class="group one" style="display: inline-block">This is one. Not only am I one...I'm inline block...and will return to my inline-block position.</span>
|
|
|
+ <div class="group two"> This is two.</div>
|
|
|
+ <div class="group three"> This is three.</div>
|
|
|
+ </div>
|
|
|
+ </body>
|
|
|
+</html>
|