Skip to content

Commit 7ca155e

Browse files
frankpaganfrankpagan
committed
format html
1 parent 37129b1 commit 7ca155e

File tree

2 files changed

+509
-225
lines changed

2 files changed

+509
-225
lines changed

‎demo/index.html

Lines changed: 190 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,196 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<title>Conditional Logic | CoCreateJS</title>
5-
<!-- CoCreate Favicon -->
6-
<link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
7-
<link rel="manifest" href="/manifest.webmanifest">
8-
</head>
9-
<body>
10-
11-
<h5 style='color:blue'>Toggle</h5>
12-
13-
<div hide='#testdiv,#div2' show='.testdiv,.div2'>
14-
<div class="test">click me</div>
15-
</div>
16-
17-
<div hide='#testdiv,#div2' show='.testdiv,.div2'>
18-
<i class="fa fa-plus-circle"></i>
19-
</div>
20-
<div id='testdiv' hidden class=" testdiv"> Only SHOW </div>
21-
<div id="div2" hidden class=" div2"> Only SHOW2</div>
22-
23-
<h5 style='color:blue'>show</h5>
24-
<div show='#showdiv' hide='#hidediv'>
25-
<i class="fas fa-plus-circle" toggle="fa-minus-circle, fa-plus-circle"></i>
26-
</div>
27-
<div id='showdiv' hidden> Only SHOW </div>
28-
<div id='hidediv'> TAG HIDE</div>
29-
30-
<h6 style='color:blue'>2 example SHOW (2 elements by ID) HIDE (1 element by ID)</h6>
31-
<div show='#showdiv1,#show2' hide='#hidediv1'>
32-
<i class="fas fa-plus-circle" toggle="fa-minus-circle, fa-plus-circle"></i>
33-
</div>
34-
<div id='showdiv1'> Only SHOW 1</div>
35-
<h3 id='show2'> only show 2</h3>
36-
<div id='hidediv1' hidden> TAG HIDE</div>
37-
38-
<h6 style='color:blue'>2 example SHOW (2 elements by class) HIDE (3 element by class)</h6>
39-
<div show='.my_show' hide='.my_hide'>
40-
<i class="fas fa-plus-circle" toggle="fa-minus-circle, fa-plus-circle"></i>
41-
</div>
42-
<div class='my_show'> Only SHOW 1</div>
43-
44-
<h3 class='my_show'> only show 2</h3>
45-
<div class='my_hide' hidden> TAG HIDE</div>
46-
<h4 class='my_hide' hidden> Tag hide 2</h4>
47-
<h3 class='my_hide' hidden></h3> Tag hide 3</h3>
48-
49-
<h6 style='color:blue'>3 example <b>CHECKBOX</b> SHOW (2 elements by class) HIDE (3 element by class)</h6>
50-
<input type='checkbox' checked="true" show='.my_show_check' hide='.my_hide_check'/>
51-
<div class='my_show_check'> Only SHOW 1</div>
52-
<h3 class='my_show_check'> only show 2</h3>
53-
<div class='my_hide_check' hidden> TAG HIDE</div>
54-
<h4 class='my_hide_check' hidden> Tag hide 2</h4>
55-
<h3 class='my_hide_check' hidden> Tag hide 3</h3>
56-
57-
<h6 style='color:blue'>4 example RADIOBUTTON</h6>
58-
<div class="section">
59-
<div class="option-group field">
60-
<label class="option">
61-
<input type="radio" name="pack" value="" show="#ctr_personal1">
62-
<span class="radio"></span> Personal
63-
</label>
64-
<label class="option">
65-
<input type="radio" name="pack" value="" show="#ctr_business1" checked>
66-
<span class="radio"></span> Business
67-
</label>
68-
<label class="option">
69-
<input type="radio" name="pack" value="" show="#ctr_corporate1">
70-
<span class="radio"></span> Corporate
71-
</label>
3+
<head>
4+
<title>Conditional Logic | CoCreateJS</title>
5+
<!-- CoCreate Favicon -->
6+
<link
7+
rel="icon"
8+
href="https://cdn.cocreate.app/favicon.ico"
9+
type="image/ico"
10+
sizes="16x16" />
11+
<link rel="manifest" href="/manifest.webmanifest" />
12+
</head>
13+
<body>
14+
<h5 style="color: blue">Toggle</h5>
15+
16+
<div hide="#testdiv,#div2" show=".testdiv,.div2">
17+
<div class="test">click me</div>
18+
</div>
19+
20+
<div hide="#testdiv,#div2" show=".testdiv,.div2">
21+
<i class="fa fa-plus-circle"></i>
22+
</div>
23+
<div id="testdiv" hidden class="testdiv">Only SHOW</div>
24+
<div id="div2" hidden class="div2">Only SHOW2</div>
25+
26+
<h5 style="color: blue">show</h5>
27+
<div show="#showdiv" hide="#hidediv">
28+
<i
29+
class="fas fa-plus-circle"
30+
toggle="fa-minus-circle, fa-plus-circle"></i>
31+
</div>
32+
<div id="showdiv" hidden>Only SHOW</div>
33+
<div id="hidediv">TAG HIDE</div>
34+
35+
<h6 style="color: blue">
36+
2 example SHOW (2 elements by ID) HIDE (1 element by ID)
37+
</h6>
38+
<div show="#showdiv1,#show2" hide="#hidediv1">
39+
<i
40+
class="fas fa-plus-circle"
41+
toggle="fa-minus-circle, fa-plus-circle"></i>
42+
</div>
43+
<div id="showdiv1">Only SHOW 1</div>
44+
<h3 id="show2">only show 2</h3>
45+
<div id="hidediv1" hidden>TAG HIDE</div>
46+
47+
<h6 style="color: blue">
48+
2 example SHOW (2 elements by class) HIDE (3 element by class)
49+
</h6>
50+
<div show=".my_show" hide=".my_hide">
51+
<i
52+
class="fas fa-plus-circle"
53+
toggle="fa-minus-circle, fa-plus-circle"></i>
54+
</div>
55+
<div class="my_show">Only SHOW 1</div>
56+
57+
<h3 class="my_show">only show 2</h3>
58+
<div class="my_hide" hidden>TAG HIDE</div>
59+
<h4 class="my_hide" hidden>Tag hide 2</h4>
60+
<h3 class="my_hide" hidden>Tag hide 3</h3>
61+
62+
<h6 style="color: blue">
63+
3 example <b>CHECKBOX</b> SHOW (2 elements by class) HIDE (3 element
64+
by class)
65+
</h6>
66+
<input
67+
type="checkbox"
68+
checked="true"
69+
show=".my_show_check"
70+
hide=".my_hide_check" />
71+
<div class="my_show_check">Only SHOW 1</div>
72+
<h3 class="my_show_check">only show 2</h3>
73+
<div class="my_hide_check" hidden>TAG HIDE</div>
74+
<h4 class="my_hide_check" hidden>Tag hide 2</h4>
75+
<h3 class="my_hide_check" hidden>Tag hide 3</h3>
76+
77+
<h6 style="color: blue">4 example RADIOBUTTON</h6>
78+
<div class="section">
79+
<div class="option-group field">
80+
<label class="option">
81+
<input
82+
type="radio"
83+
name="pack"
84+
value=""
85+
show="#ctr_personal1" />
86+
<span class="radio"></span> Personal
87+
</label>
88+
<label class="option">
89+
<input
90+
type="radio"
91+
name="pack"
92+
value=""
93+
show="#ctr_business1"
94+
checked />
95+
<span class="radio"></span> Business
96+
</label>
97+
<label class="option">
98+
<input
99+
type="radio"
100+
name="pack"
101+
value=""
102+
show="#ctr_corporate1" />
103+
<span class="radio"></span> Corporate
104+
</label>
105+
</div>
72106
</div>
73-
</div><!-- end section -->
74-
75-
<div id='ctr_personal1' hidden> PERSONAL</div>
76-
<div id='ctr_business1' > BUSINESS</div>
77-
<div id='ctr_corporate1' hidden> CORPORATE</div>
78-
79-
<h6 style='color:blue'>5 example RADIOBUTTON (show MULTIPLE)</h6>
80-
<div class="section">
81-
<div class="option-group field">
82-
<label class="option">
83-
<input type="radio" name="package" value="" show="#ctr_personal">
84-
<span class="radio"></span> Personal
85-
</label>
86-
<label class="option">
87-
<input type="radio" name="package" value="" show="#ctr_business,#other_business" checked>
88-
<span class="radio"></span> Business
89-
</label>
90-
<label class="option">
91-
<input type="radio" name="package" value="" show=".ctr_corporate">
92-
<span class="radio"></span> Corporate
93-
</label>
107+
<!-- end section -->
108+
109+
<div id="ctr_personal1" hidden>PERSONAL</div>
110+
<div id="ctr_business1">BUSINESS</div>
111+
<div id="ctr_corporate1" hidden>CORPORATE</div>
112+
113+
<h6 style="color: blue">5 example RADIOBUTTON (show MULTIPLE)</h6>
114+
<div class="section">
115+
<div class="option-group field">
116+
<label class="option">
117+
<input
118+
type="radio"
119+
name="package"
120+
value=""
121+
show="#ctr_personal" />
122+
<span class="radio"></span> Personal
123+
</label>
124+
<label class="option">
125+
<input
126+
type="radio"
127+
name="package"
128+
value=""
129+
show="#ctr_business,#other_business"
130+
checked />
131+
<span class="radio"></span> Business
132+
</label>
133+
<label class="option">
134+
<input
135+
type="radio"
136+
name="package"
137+
value=""
138+
show=".ctr_corporate" />
139+
<span class="radio"></span> Corporate
140+
</label>
141+
</div>
94142
</div>
95-
</div><!-- end section -->
96-
97-
<div id='ctr_personal' hidden> PERSONAL</div>
98-
<div id='ctr_business' > BUSINESS</div>
99-
<div id='other_business' > other_business</div>
100-
<div class='ctr_corporate' hidden> CORPORATE 1</div>
101-
<div class='ctr_corporate' hidden> CORPORATE 2</div>
102-
<div class='ctr_corporate' hidden> CORPORATE 3 </div>
103-
104-
<h6 style='color:blue'>6 example SELECT</h6>
105-
<select >
143+
<!-- end section -->
144+
145+
<div id="ctr_personal" hidden>PERSONAL</div>
146+
<div id="ctr_business">BUSINESS</div>
147+
<div id="other_business">other_business</div>
148+
<div class="ctr_corporate" hidden>CORPORATE 1</div>
149+
<div class="ctr_corporate" hidden>CORPORATE 2</div>
150+
<div class="ctr_corporate" hidden>CORPORATE 3</div>
151+
152+
<h6 style="color: blue">6 example SELECT</h6>
153+
<select>
106154
<option value="">Payment Method</option>
107-
<option value="Credit Card" show="#ctr_creditcard" selected>Credit Card</option>
108-
<option value="Check" show=".ctr_check">Check</option>
109-
<option value="Other" show="#ctr_other">Other</option>
110-
</select>
111-
<div id='ctr_creditcard' > Credicard</div>
112-
<div class='ctr_check' hidden> CHECK</div>
113-
<div class='ctr_check' hidden> CHECK2</div>
114-
<div id='ctr_other' hidden> OTHER</div>
115-
116-
<h6 style='color:blue'>7 example SELECT (show multiples)</h6>
117-
<select multiple="true">
118-
<option value="">Payment Method</option>
119-
<option value="Credit Card" show="#ctr_creditcard1,#ctr_creditcard2" selected>Credit Card</option>
120-
<option value="Check" show=".ctr_check1">Check</option>
121-
<option value="Other" show="#ctr_other1,#ctr_other2">Other</option>
122-
</select>
123-
<div id='ctr_creditcard1' > Credicard</div>
124-
<div id='ctr_creditcard2' > Credicard2</div>
125-
<div class='ctr_check1' hidden> CHECK</div>
126-
<div class='ctr_check1' hidden> CHECK2</div>
127-
<div class='ctr_check1' hidden> CHECK3</div>
128-
<div class='ctr_check1' hidden> CHECK4</div>
129-
<div id='ctr_other1' hidden> OTHER</div>
130-
131-
<div hide='iframe;,#testdiv1' show='iframe;,#testdiv1'>
132-
<div class="test">click me</div>
133-
</div>
134-
135-
<iframe srcDoc="<div id='testdiv1'> will toggle </div>"></iframe>
136-
<div id='testdiv1' class=""> will toggle </div>
137-
138-
139-
<script src="../dist/CoCreate-conditional-logic.js"></script>
140-
<!-- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script> -->
141-
142-
</body>
143-
</html>
144-
155+
<option value="Credit Card" show="#ctr_creditcard" selected>
156+
Credit Card
157+
</option>
158+
<option value="Check" show=".ctr_check">Check</option>
159+
<option value="Other" show="#ctr_other">Other</option>
160+
</select>
161+
<div id="ctr_creditcard">Credicard</div>
162+
<div class="ctr_check" hidden>CHECK</div>
163+
<div class="ctr_check" hidden>CHECK2</div>
164+
<div id="ctr_other" hidden>OTHER</div>
145165

166+
<h6 style="color: blue">7 example SELECT (show multiples)</h6>
167+
<select multiple="true">
168+
<option value="">Payment Method</option>
169+
<option
170+
value="Credit Card"
171+
show="#ctr_creditcard1,#ctr_creditcard2"
172+
selected>
173+
Credit Card
174+
</option>
175+
<option value="Check" show=".ctr_check1">Check</option>
176+
<option value="Other" show="#ctr_other1,#ctr_other2">Other</option>
177+
</select>
178+
<div id="ctr_creditcard1">Credicard</div>
179+
<div id="ctr_creditcard2">Credicard2</div>
180+
<div class="ctr_check1" hidden>CHECK</div>
181+
<div class="ctr_check1" hidden>CHECK2</div>
182+
<div class="ctr_check1" hidden>CHECK3</div>
183+
<div class="ctr_check1" hidden>CHECK4</div>
184+
<div id="ctr_other1" hidden>OTHER</div>
185+
186+
<div hide="iframe;,#testdiv1" show="iframe;,#testdiv1">
187+
<div class="test">click me</div>
188+
</div>
189+
190+
<iframe srcdoc="<div id='testdiv1'> will toggle </div>"></iframe>
191+
<div id="testdiv1" class="">will toggle</div>
192+
193+
<script src="../dist/CoCreate-conditional-logic.js"></script>
194+
<!-- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script> -->
195+
</body>
196+
</html>

0 commit comments

Comments
 (0)