Skip to content

Commit d54258f

Browse files
frankpaganfrankpagan
committed
fix: replaced show and hide class hidden with attribute hidden
1 parent b671d99 commit d54258f

File tree

3 files changed

+33
-33
lines changed

3 files changed

+33
-33
lines changed

‎demo/index.html‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<title>Conditional Logic | CoCreateJS</title>
55
<!-- CoCreate Favicon -->
6-
<link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16" parse="true">
6+
<link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
77
</head>
88
<body>
99

@@ -16,14 +16,14 @@ <h5 style='color:blue'>Toggle</h5>
1616
<div hide='#testdiv,#div2' show='.testdiv,.div2'>
1717
<i class="fa fa-plus-circle"></i>
1818
</div>
19-
<div id='testdiv' class="hidden testdiv"> Only SHOW </div>
20-
<div id="div2" class="hidden div2"> Only SHOW2</div>
19+
<div id='testdiv' hidden class=" testdiv"> Only SHOW </div>
20+
<div id="div2" hidden class=" div2"> Only SHOW2</div>
2121

2222
<h5 style='color:blue'>show</h5>
2323
<div show='#showdiv' hide='#hidediv'>
2424
<i class="fas fa-plus-circle" toggle="fa-minus-circle, fa-plus-circle"></i>
2525
</div>
26-
<div id='showdiv' class="hidden"> Only SHOW </div>
26+
<div id='showdiv' hidden> Only SHOW </div>
2727
<div id='hidediv'> TAG HIDE</div>
2828

2929
<h6 style='color:blue'>2 example SHOW (2 elements by ID) HIDE (1 element by ID)</h6>
@@ -32,7 +32,7 @@ <h6 style='color:blue'>2 example SHOW (2 elements by ID) HIDE (1 element by ID)<
3232
</div>
3333
<div id='showdiv1'> Only SHOW 1</div>
3434
<h3 id='show2'> only show 2</h3>
35-
<div id='hidediv1' class="hidden"> TAG HIDE</div>
35+
<div id='hidediv1' hidden> TAG HIDE</div>
3636

3737
<h6 style='color:blue'>2 example SHOW (2 elements by class) HIDE (3 element by class)</h6>
3838
<div show='.my_show' hide='.my_hide'>
@@ -41,17 +41,17 @@ <h6 style='color:blue'>2 example SHOW (2 elements by class) HIDE (3 element by c
4141
<div class='my_show'> Only SHOW 1</div>
4242

4343
<h3 class='my_show'> only show 2</h3>
44-
<div class='my_hide' class="hidden"> TAG HIDE</div>
45-
<h4 class='my_hide' class="hidden"> Tag hide 2</h4>
46-
<h3 class='my_hide' class="hidden"></h3> Tag hide 3</h3>
44+
<div class='my_hide' hidden> TAG HIDE</div>
45+
<h4 class='my_hide' hidden> Tag hide 2</h4>
46+
<h3 class='my_hide' hidden></h3> Tag hide 3</h3>
4747

4848
<h6 style='color:blue'>3 example <b>CHECKBOX</b> SHOW (2 elements by class) HIDE (3 element by class)</h6>
4949
<input type='checkbox' checked="true" show='.my_show_check' hide='.my_hide_check'/>
5050
<div class='my_show_check'> Only SHOW 1</div>
5151
<h3 class='my_show_check'> only show 2</h3>
52-
<div class='my_hide_check' class="hidden"> TAG HIDE</div>
53-
<h4 class='my_hide_check' class="hidden"> Tag hide 2</h4>
54-
<h3 class='my_hide_check' class="hidden"> Tag hide 3</h3>
52+
<div class='my_hide_check' hidden> TAG HIDE</div>
53+
<h4 class='my_hide_check' hidden> Tag hide 2</h4>
54+
<h3 class='my_hide_check' hidden> Tag hide 3</h3>
5555

5656
<h6 style='color:blue'>4 example RADIOBUTTON</h6>
5757
<div class="section">
@@ -71,9 +71,9 @@ <h6 style='color:blue'>4 example RADIOBUTTON</h6>
7171
</div>
7272
</div><!-- end section -->
7373

74-
<div id='ctr_personal1' class="hidden"> PERSONAL</div>
74+
<div id='ctr_personal1' hidden> PERSONAL</div>
7575
<div id='ctr_business1' > BUSINESS</div>
76-
<div id='ctr_corporate1' class="hidden"> CORPORATE</div>
76+
<div id='ctr_corporate1' hidden> CORPORATE</div>
7777

7878
<h6 style='color:blue'>5 example RADIOBUTTON (show MULTIPLE)</h6>
7979
<div class="section">
@@ -93,12 +93,12 @@ <h6 style='color:blue'>5 example RADIOBUTTON (show MULTIPLE)</h6>
9393
</div>
9494
</div><!-- end section -->
9595

96-
<div id='ctr_personal' class="hidden"> PERSONAL</div>
96+
<div id='ctr_personal' hidden> PERSONAL</div>
9797
<div id='ctr_business' > BUSINESS</div>
9898
<div id='other_business' > other_business</div>
99-
<div class='ctr_corporate' class="hidden"> CORPORATE 1</div>
100-
<div class='ctr_corporate' class="hidden"> CORPORATE 2</div>
101-
<div class='ctr_corporate' class="hidden"> CORPORATE 3 </div>
99+
<div class='ctr_corporate' hidden> CORPORATE 1</div>
100+
<div class='ctr_corporate' hidden> CORPORATE 2</div>
101+
<div class='ctr_corporate' hidden> CORPORATE 3 </div>
102102

103103
<h6 style='color:blue'>6 example SELECT</h6>
104104
<select >
@@ -108,9 +108,9 @@ <h6 style='color:blue'>6 example SELECT</h6>
108108
<option value="Other" show="#ctr_other">Other</option>
109109
</select>
110110
<div id='ctr_creditcard' > Credicard</div>
111-
<div class='ctr_check' class="hidden"> CHECK</div>
112-
<div class='ctr_check' class="hidden"> CHECK2</div>
113-
<div id='ctr_other' class="hidden"> OTHER</div>
111+
<div class='ctr_check' hidden> CHECK</div>
112+
<div class='ctr_check' hidden> CHECK2</div>
113+
<div id='ctr_other' hidden> OTHER</div>
114114

115115
<h6 style='color:blue'>7 example SELECT (show multiples)</h6>
116116
<select multiple="true">
@@ -121,11 +121,11 @@ <h6 style='color:blue'>7 example SELECT (show multiples)</h6>
121121
</select>
122122
<div id='ctr_creditcard1' > Credicard</div>
123123
<div id='ctr_creditcard2' > Credicard2</div>
124-
<div class='ctr_check1' class="hidden"> CHECK</div>
125-
<div class='ctr_check1' class="hidden"> CHECK2</div>
126-
<div class='ctr_check1' class="hidden"> CHECK3</div>
127-
<div class='ctr_check1' class="hidden"> CHECK4</div>
128-
<div id='ctr_other1' class="hidden"> OTHER</div>
124+
<div class='ctr_check1' hidden> CHECK</div>
125+
<div class='ctr_check1' hidden> CHECK2</div>
126+
<div class='ctr_check1' hidden> CHECK3</div>
127+
<div class='ctr_check1' hidden> CHECK4</div>
128+
<div id='ctr_other1' hidden> OTHER</div>
129129

130130
<div hide='iframe;,#testdiv1' show='iframe;#testdiv1,#testdiv1'>
131131
<div class="test">click me</div>

‎docs/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ <h2 class="padding:5px_0px">Demo</h2>
110110
<div class="container svColumn overflow:hidden card position:relative border-radius:2px width:auto height:100%" id="sandbox">
111111
<div class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
112112
<a class="margin-right:10px" id="code" show="#preview" hide="#code, #view"><i class="far fa-eye"></i></a>
113-
<a class="margin-right:10px hidden" id="preview" show="#code, #view" hide="#preview"><i class="fas fa-code"></i></a>
113+
<a class="margin-right:10px" id="preview" show="#code, #view" hide="#preview" hidden><i class="fas fa-code"></i></a>
114114
<a class="margin-right:5px" fullscreen target="#playground"><i class="fas fa-expand"></i></a>
115115
</div>
116116
<div class="svRow">

‎src/index.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,10 @@ function selectShowHideEle(e) {
4848
var show = opt.getAttribute('show');
4949
if (typeof show != 'undefined') {
5050
for (let el of queryFrameSelectorAll(show))
51-
el.classList.add('hidden');
51+
el.setAttribute('hidden', '');
5252
if (opt.selected === true) {
5353
for (let el of queryFrameSelectorAll(show))
54-
el.classList.remove('hidden');
54+
el.removeAttribute('hidden');
5555
}
5656
}
5757
}
@@ -74,12 +74,12 @@ function clickShowHideEle(e) {
7474
show = radio.getAttribute('show');
7575

7676
for (let el of queryFrameSelectorAll(show)) {
77-
el.classList.add('hidden');
77+
el.setAttribute('hidden', '');
7878
}
7979

8080
if (radio.checked) {
8181
for (let el of queryFrameSelectorAll(show))
82-
el.classList.remove('hidden');
82+
el.removeAttribute('hidden');
8383
}
8484
}
8585
}
@@ -88,8 +88,8 @@ function clickShowHideEle(e) {
8888
let updated_els = [];
8989

9090
for (let el of queryFrameSelectorAll(show)) {
91-
if (el.classList.contains('hidden')) {
92-
el.classList.remove('hidden');
91+
if (el.hasAttributes('hidden')) {
92+
el.removeAttribute('hidden');
9393
updated_els.push(el);
9494
}
9595
}
@@ -102,7 +102,7 @@ function clickShowHideEle(e) {
102102
break;
103103
}
104104
}
105-
if (!existEqual) el.classList.add('hidden');
105+
if (!existEqual) el.setAttribute('hidden', '');
106106
}
107107
}
108108

0 commit comments

Comments
 (0)