btn-toggle
Element type
Class
Element code
btn-toggle
Attribute
data-show, data-hide
Action
Added itself the active toggle class, with the data-show will call the element with the status "display: block" and data-hide will action the element with the status "display: none;"
Example code
<div class="btn-toggle" data-show="" data-hide="" >..TEXT..</div>

btn-collapse
Element type
Class
Element code
btn-collapse
Attribute
data-target
Target Element
1st element: data-collapse
2nd element: content
Action
Toggle target element with class "collapsed"
Example code
<div class="btn-collapse" data-target="box-1">Collapse Button Box-1</div>

<div class="data-collapse box-1">
  ..TEXT..
  <div class="content"> </div>
</div>
box-modal
Element type
Class
Element code
box-modal
Attribute
class="modal-popup" and data-hide="modal-popup"
Action
Modal will showing when the element with class "box-modal.show"
Example code
<div class="box-modal fade confirmation-popup show" >

<div class="bg-dark btn-toggle btn-close" data-hide="confirmation-popup"> Close Button </div>

</div>
loader-toggle
Element type
Class
Element code
loader-toggle
Attribute
class="loader-toggle"
Action
It will delay and show the icon spinning while loading
Example code
<div class="loader-toggle" >..TEXT..</div>

sticky
Element type
Class
Element code
sticky
Attribute
class="sticky"
Action
The contrainer "sticky" will stay at the top of the page when scroll up
Example code
<div class="sticky" >
<div class="container" > </div>
</div>
btn-tooltip
Element type
Class
Element code
btn-tooltip
Attribute
class="btn-tooltip"
Action
Added itself the active toggle class
Example code
<div class="btn-tooltip active" > </div>
btn-sel
Element type
Class
Element code
btn-sel
Attribute
data-text, data-box
Action
data-text => Updates its own text into the specific class
data-box => Shows the target element
Example code
<p class="btn-sel" data-text="num-sel-lobby" data-box="lobby-content-container">1</p>
<p class="btn-sel" data-text="num-sel-lobby" data-box="lobby-content-container">2</p>
<p class="btn-sel" data-text="num-sel-lobby" data-box="lobby-content-container">3</p>
<div class="lobby-content-container">
<p class="num-sel-lobby"></p>
</div>
inp-num-only
Element type
Class
Element code
inp-num-only
Attribute
for input tag type text
Action
Force control the input field will accept only number and plus sign (+).
Example code
<input type="text" class="inp-num-only" />
Example
inp-dec-only
Element type
Class
Element code
inp-dec-only
Attribute
for input tag type text
Action
Force control the input field will accept only Decimal.
Example code
<input type="text" class="inp-dec-only" />
Example
data-currency-format
Element type
Class
Element code
data-currency-format
Attribute
for input tag type text
Action
Converts the decimal/number to the currency with comma format.
Example code
<input type="text" class="inp-dec-only data-currency-format" />
Example