W3.CSS Accordions
ကော်ဒီယန်များ အလုပ်လုပ်ပုံကို ကြည့်ရန် အောက်ပါ "Open Section" ခလုတ်များကို နှိပ်ပါ။
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion with Images:
French Alps
ဘာဂျာ
HTML အကြောင်းအရာကို ပြသရန် (နှင့် ဝှက်ထားရန်) ကော်ဒီယန်ကို အသုံးပြုသည်။
ဘာဂျာအကြောင်းအရာကို ဝှက်ထား ရန် w3-hide class ကို သုံး ပါ။
အကြောင်းအရာကို အဖွင့်အပိတ်လုပ်ရန် မည်သည့်ခလုတ်ကိုမဆို အသုံးပြုပါ-
ဥပမာ
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Open Section 1</button>
<div id="Demo1" class="w3-container
w3-hide">
<p>Some text..</p>
</div>
<script>
function myFunction(id) {
var x =
document.getElementById(id);
if (x.className.indexOf("w3-show")
== -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
အကော်ဒီယံကိုဖွင့်ရန်အသုံးပြုသောဒြပ်စင်နှစ်ခုလုံးနှင့်ကော်ဒီယံ၏အကြောင်းအရာနှစ်ခုလုံးသည် HTML ဒြပ်စင်ဖြစ်နိုင်သည်။
ကော်ဒီယံနှင့် တွဲ၍
ဤဇယားသည် အကော်ဒီယံနှင့် တွဲချခြင်းကြား ခြားနားချက်ကို ပြသည်-
| ဘာဂျာ | ကျသည် |
|---|---|
| အကြောင်းအရာသည် စာမျက်နှာအကြောင်းအရာကို အောက်သို့ တွန်းချသည်။ | အကြောင်းအရာသည် ရှိပြီးသား စာမျက်နှာ၏ အကြောင်းအရာထက် အကျုံးဝင်ပါသည်။ |
| အကြောင်းအရာသည် မကြာခဏ 100% ကျယ်ပြန့်သည်။ | အကြောင်းအရာသည် 160px ကျယ်သည် (မူလ) |
| ကဏ္ဍများစွာကို ဖွင့်ရန် အသုံးပြုလေ့ရှိသည်။ | ကဏ္ဍတစ်ခုဖွင့်ရန် မကြာခဏအသုံးပြုသည်။ |
အကော်ဒီယံ
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
ဆွဲချမှုများ
ဘာဂျာခလုတ်များ
အကော်ဒီယံအကြောင်းအရာကိုဖွင့်ရန် မည်သည့် HTML အစိတ်အပိုင်းကိုမဆို သင်အသုံးပြုနိုင်ပါသည်။ စာမျက်နှာတစ်ခုလုံး၏အကျယ် (100% အကျယ်) ကို ချဲ့ရန် w3-block အတန်းအစား ခလုတ်တစ်ခုကို ကျွန်ုပ်တို့ နှစ်သက်သည် ။
W3.CSS ရှိ ခလုတ်များကို မူရင်းအတိုင်း ဗဟိုပြုထားကြောင်း သတိရပါ။ ၎င်းတို့ကို ဘယ်ဘက်သို့ ညှိလိုပါက w3-left-align class ကိုသုံးပါ ။ သို့သော်၊ သင်သည် ကျွန်ုပ်တို့၏ချဉ်းကပ်မှုကို လိုက်နာရန် မလိုအပ်ပါ - ကော်ဒီယံသည် မည်သည့်နည်းဖြင့်မဆို ကြည့်ကောင်းနေလိမ့်မည်-
Lorem ipsum...
Lorem ipsum...
Centered content as well!
ဥပမာ
<button onclick="myFunc('Demo1')"
class="w3-button">
Normal button</button>
<div id="Demo1" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="w3-button w3-block w3-left-align
w3-green">
Left aligned and full-width</button>
<div id="Demo2" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn w3-block
w3-red">
Centered and full-width</button>
<div id="Demo3"
class="w3-hide w3-center">
<p>Centered content as well!</p>
</div>
Active Accordion ခလုတ်များ
ဖွင့်ထားသော ကော်ဒီများကို မီးမောင်းထိုးပြရန် JavaScript ကိုသုံးပါ (ကိုနှိပ်ပါ)
Some text..
Some other text..
ဥပမာ
// Add the w3-red class to all opened accordions
var x =
document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += "
w3-red";
} else {
x.className = x.className.replace("w3-show",
"");
x.previousElementSibling.className =
x.previousElementSibling.className.replace("w3-red", "");
}
ဘာဂျာ အနံ
ပုံမှန်အားဖြင့်၊ ဘလောက်၏အကျယ်သည် 100% ဖြစ်သည်။ ၎င်းကို အစားထိုးရန်အတွက် အကော်ဒီယံကွန်တိန်နာ၏ CSS အကျယ်ပိုင်ဆိုင်မှုကို ပြောင်းပါ-
Some text..
Some text..
Some text..
Some text..
ဥပမာ
<div class="w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')"
class="w3-button w3-block">
50%
</button>
<div id="Demo1" class="w3-hide">
<p>Some text..</p>
</div>
</div>
ဘာဂျာ အကြောင်းအရာ
လင့်ခ်များဖြင့် ကော်ဒီယံ
ဥပမာ
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</button>
<div id="Demo1" class="w3-hide">
<a href="#" class="w3-button w3-block w3-left-align">Link 1</a>
<a href="#"
class="w3-button w3-block w3-left-align">Link 2</a>
<a href="#"
class="w3-button w3-block w3-left-align">Link 3</a>
</div>
စာရင်းတစ်ခုအနေဖြင့် ကော်ဒီယံ
- ဂျေးလ်
- ဧဝ
- အာဒံ
ဥပမာ
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</button>
<div id="Demo1" class="w3-hide">
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
Sidebar အတွင်းရှိ Accordion (နောက်မှ sidebars အကြောင်း ပိုမိုလေ့လာနိုင်ပါမည်)
ဥပမာ
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:200px;">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button" onclick="myAccFunc()">Accordion</a>
<div
id="demoAcc" class="w3-hide">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
<div class="w3-dropdown-click">
<a href="#" class="w3-bar-item w3-button" onclick="myDropFunc()">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
</div>
<a href="#" class="w3-bar-item
w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
ကာတွန်း အကော်ဒီယံများ
အကော်ဒီယံအကြောင်းအရာတွင် အရောင်မှိန်ရန်၊ ဇူးမ်ချဲ့ရန် သို့မဟုတ် လျှောကျရန် w3-animate- အတန်းများကို အသုံးပြုပါ။
ဥပမာ
<div id="Demo1" class="w3-hide
w3-animate-zoom">