Skip to content

Commit 85cf4d4

Browse files
rubenshiburubenshibu
authored
Merge pull request #27 from jamesjose03/jkj-csscomponents
Added Accordion component
2 parents 6d11a83 + 6b622bd commit 85cf4d4

File tree

3 files changed

+88
-1
lines changed

3 files changed

+88
-1
lines changed

‎css/accordion.css

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/* James K Jose */
2+
.accordion-jkj {
3+
background-color: #eee;
4+
color: #444;
5+
cursor: pointer;
6+
padding: 18px;
7+
width: 100%;
8+
text-align: left;
9+
border: none;
10+
outline: none;
11+
transition: 0.4s;
12+
}
13+
.active, .accordion-jkj:hover {
14+
background-color: #ccc;
15+
}
16+
.panel {
17+
padding: 0 18px;
18+
background-color: white;
19+
max-height: 0;
20+
overflow: hidden;
21+
transition: max-height 0.2s ease-out;
22+
}

‎js/accordion.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
var acc = document.getElementsByClassName("accordion-jkj");
2+
var i;
3+
4+
for (i = 0; i < acc.length; i++) {
5+
acc[i].addEventListener("click", function() {
6+
this.classList.toggle("active");
7+
var panel = this.nextElementSibling;
8+
if (panel.style.maxHeight) {
9+
panel.style.maxHeight = null;
10+
} else {
11+
panel.style.maxHeight = panel.scrollHeight + "px";
12+
}
13+
});
14+
}

‎pages/accordion.html

+52-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<link rel="stylesheet" href="../css/style.css" />
2323
<link rel="stylesheet" href="../css/accordion.css" />
2424
<link rel="stylesheet" href="../css/cardcolor.css" />
25-
<link rel="stylesheet" href="../css/assets/magic.css" />
25+
<link rel="stylesheet" href="../css/assets/magic.css" />
2626
</head>
2727

2828
<body>
@@ -47,11 +47,62 @@ <h3>Add your different Accordion</h3>
4747
<div class="container-fluid">
4848
<!-- your name -->
4949
<!-- Add your html content that you have copied from contributors.md along with you component -->
50+
51+
<!-- James K Jose -->
52+
<div class="row">
53+
<div class="col-lg-6">
54+
<div class="component">
55+
<div class="card magictime">
56+
<div class="card-title jkj">
57+
<strong>Accordion</strong>
58+
</div>
59+
<div class="card-content">
60+
61+
<button class="accordion-jkj">Section 1</button>
62+
<div class="panel">
63+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores voluptates doloribus asperiores repellat quaerat illum ad enim minima eaque est!</p>
64+
</div>
65+
66+
<button class="accordion-jkj">Section 2</button>
67+
<div class="panel">
68+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate fugit voluptatibus accusamus non inventore laborum aliquam sint! Maxime, saepe repellendus!</p>
69+
</div>
70+
71+
<button class="accordion-jkj">Section 3</button>
72+
<div class="panel">
73+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus nulla laborum suscipit iusto obcaecati ipsam soluta, in sit iste temporibus?</p>
74+
</div>
75+
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
<div class="col-lg-6">
81+
<div class="component">
82+
<div class="card magictime">
83+
<div class="card-title jkj">
84+
<strong>Creator</strong>
85+
</div>
86+
<div class="card-content">
87+
<div class="creater-name">
88+
<h2>
89+
<b>Name:</b>
90+
<span>
91+
<a href="http://github.com/jamesjose03">James Kaviyil Jose </a>
92+
</span>
93+
</h2>
94+
</div>
95+
</div>
96+
</div>
97+
</div>
98+
</div>
99+
</div>
50100
</div>
51101
</section>
52102
<footer>
53103
<p>made with 💛 by, <br /><strong>CS CHAPTER AJCESB</strong></p>
54104
</footer>
55105
<script src="../js/index.js"></script>
106+
<script src="../js/accordion.js"></script>
56107
</body>
57108
</html>

0 commit comments

Comments
 (0)