ACCORDION
ACCORDION
The graphical control element accordion is a vertically stacked list of items, such as labels or thumbnails. Each item can be "expanded" or "stretched" to reveal the content associated with that item. Accordions are useful when you want to toggle between hiding and showing large amount of content.
<!DOCTYPE html>
<html>
<head>
<style>
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active,
button.accordion:hover {
background-color: #ddd;
}
button.accordion:after {
/* Unicode character for "plus" sign
(+) is '\02795' */
content: '\02795';
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
/* Unicode character for "minus" sign
(-) is '\2796' */
content: "\2796";
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height: 500px;
}
</style>
</head>
<body>
<h2>Accordion Example</h2>
<p>In this example we have added a
"plus" sign to each button. When the
user clicks on the button,the "plus"
sign is replaced with"minus"sign.</p>
<button class="accordion">Tiger
</button>
<div class="panel">
<p>The tiger is the largest cat
species, most recognisable for their
pattern of dark vertical stripes on
reddish-orange fur with a lighter
underside.</p>
</div>
<button class="accordion">Lion</button>
<div class="panel">
<p>The lion is one of the big cats
in the genus Panthera and a member of
the family Felidae.The commonly used
term African lion collectively denotes
the several subspecies in Africa.</p>
</div>
<button class="accordion">Cheetah
</button>
<div class="panel">
<p>The cheetah, also known as the
hunting leopard, is a big cat that
occurs mainly in easternand southern
Africa and a few parts of Iran</p>
</div>
<script>
var acc = document
.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList
.toggle("show");
}
}
</script>
</body>
</html>
Result For Above Example
Accordion Example
In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.
The tiger is the largest cat species, most recognisable for their pattern of dark vertical stripes on reddish-orange fur with a lighter underside.
The lion is one of the big cats in the genus Panthera and a member of the family Felidae. The commonly used term African lion collectively denotes the several subspecies in Africa.
The cheetah, also known as the hunting leopard, is a big cat that occurs mainly in eastern and southern Africa and a few parts of Iran
TRY YOURSELF :
Type the code or copy/paste below and press show result to see the result
Komentar
Posting Komentar