Menu

Responsive and rich accordion design

Responsive and rich accordion design using HTML and CSS:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
  background-color: #A678CF;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  border-top: 1px dotted #0069b9;
  margin: 5px 0 0 5px;
}

.accordion:before {
  content: '>';
  color: white;
  font-weight: bold;
  float: left;
  margin-right:10px;
  margin-left: 0px;
}

.active:before {
  content: "^";
}
.active, .accordion:hover {
  background-color: green; 
}

.panel {
  padding: 0px 18px;
  margin-left: 25px;
  margin-right: -5px;
  display: none;
  background-color: green;
  overflow: hidden;
  color: white;
}
</style>
</head>
<body>

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>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.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>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.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>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.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

</body>
</html>

Accordion component using HTML and CSS
Accordion component

at No comments:
Labels: , , , ,

Accordion using simple html and css

In this tutorial we are going to create an accordion just using the simple HTML, JavaScript and CSS, as shown below Accordion example picture.

simple accordion example
Accordion example
Here is the complete code snippet which we could use to design the same accordion as shown above.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
  background-color: chartreuse;
  color: #444;
  cursor: pointer;
  padding: 18px;
  margin: 5px 0px 0 5px;
  width: 100%;
  border-top: 1px dotted #0069b9;
  text-align: left;
  
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  transform: skew(-20deg);
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:before {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: left;
  margin-right:10px;
  margin-left: 0px;
}

.active:before {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>

<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button on the left side of the accordion section. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<button class="accordion">Accordion 1</button>
<div class="panel">
  <p>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.</p>
</div>

<button class="accordion">Accordion 2</button>
<div class="panel">
  <p>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.</p>
</div>

<button class="accordion">Accordion 3</button>
<div class="panel">
  <p>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.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>


You can browse this live example and try and play with this on W3School.com. Click here to open the example.
at No comments:
Labels: , , ,

Baat karni mujhe mushkil kabhi aisi to na thi | BAHADUR SHAH ZAFAR

baat karni mujhe mushkil kabhi aisi to na thi 
jaisi ab hai teri mahfil kabhi aisi to na thi 


le gaya chhin ke kaun aaj tera sabr o qarar 

be-qarari tujhe ai dil kabhi aisi to na thi 


us ki aankhon ne KHuda jaane kiya kya jadu 

ki tabiat meri mail kabhi aisi to na thi 


aks-e-ruKHsar ne kis ke hai tujhe chamkaya 

tab tujh mein mah-e-kaamil kabhi aisi to na thi 


ab ki jo rah-e-mohabbat mein uThai taklif 

saKHt hoti hamein manzil kabhi aisi to na thi 


pa-e-kuban koi zindan mein naya hai majnun 

aati aawaz-e-salasil kabhi aisi to na thi 


nigah-e-yar ko ab kyun hai taghaful ai dil 

wo tere haal se ghafil kabhi aisi to na thi 


chashm-e-qatil meri dushman thi hamesha lekin 

jaisi ab ho gai qatil kabhi aisi to na thi 


kya sabab tu jo bigaDta hai 'zafar' se har bar 

KHu teri hur-shamail kabhi aisi to na thi 

----------------------------------------------------------------------------



بات کرنی مجھے مشکل کبھی ایسی تو نہ تھی 
جیسی اب ہے تیری محفل کبھی ایسی تو نہ تھی 


لے گیا چھین کے کون آج تیرا صبر و قرار

بے-قراری تجھے ای دل کبھی ایسی تو نہ تھی


اس کی آنکھوں نے خدا جانے کیا کیا جادو 

کی طبیت میری میل کبھی ایسی تو نہ تھی


عکس-ا-رخسار نے کس کے ہے تجھے چمکایا 

ٹیب تجھ میں مہ-ا-کامل کبھی ایسی تو نہ تھی


اب کی جو راہ-ے-محبّت میں اٹھائی تکلیف 

سخت ہوتی ہمیں منزل کبھی ایسی تو نہ تھی


پا-ا-کبن کوئی زندان میں نیا ہے مجنوں 

آتی آواز-ا-سلاسل کبھی ایسی تو نہ تھی


نگاہ-ا-یار کو اب کیوں ہے تغافل ای دل 

وو تیرے حال سے غفل کبھی ایسی تو نہ تھی


چشم-ا-قتل میری دشمن تھی ہمیشہ لیکن 

جیسی اب ہو گئی قتل کبھی ایسی تو نہ تھی


کیا سبب تو جو بگڑتا ہے 'ظفر' سے ہر بار 

خو تیری ہر-شمائل کبھی ایسی تو نہ تھی


-written by KING BAHADUR SHAH ZAFAR
at No comments:
Labels: , , , ,
Subscribe to: Posts (Atom)