CSS Accordion

HTML Code (index.html)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Accordion using CSS</title>
  <!-- using google font -->
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
  <!-- importing reset and custom css -->
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div class="container">
    <!-- accordion -->
    <div class="accordion">
      <h2>Accordion using CSS</h2>
      <!-- 1st holder -->
      <div class="holder">
        <input type="radio" name="accordion" id="accordion1" checked>
        <label for="accordion1">Can I change my holiday?</label>
        <div class="content">
          <p>Eum ne iisque legendos. Cum at mutat nostrud, ad eos porro quando, mea ex meliore reformidans. Ea meliore nusquam has, an eius dicunt feugiat mea. Id vis appetere definitiones, sea aliquid denique assueverit cu. Ei modus nulla eligendi mel.</p>
        </div>
      </div>
      <!-- 2nd holder -->
      <div class="holder">
        <input type="radio" name="accordion" id="accordion2">
        <label for="accordion2">What do I do if my contact details have changed?</label>
        <div class="content">
          <p>Quo no cetero tacimates accommodare, sea ne dicta munere omittam. Wisi inani salutandi ea sed, nec et fugit solet fabulas. In usu aperiri tacimates maiestatis, est te tritani perfecto intellegam, ne diceret deleniti ius. At decore bonorum deseruisse mei, vis et hinc conclusionemque. Sea no quidam copiosae dignissim.</p>
        </div>
      </div>
      <!-- 3rd holder -->
      <div class="holder">
        <input type="radio" name="accordion" id="accordion3">
        <label for="accordion3">What happens if I change my name after booking?</label>
        <div class="content">
          <p>Assueverit neglegentur cum ut, in soleat virtute blandit eum. Erant soleat usu ei, sea modo mundi democritum ne. Tacimates platonem quo cu, te vim ipsum alterum omittantur. Vel probo epicurei recteque ad, eos ea porro lucilius intellegat. Alia integre qualisque sea ea. Per ei nobis possit.</p>
        </div>
      </div>
      <!-- 4th holder -->
      <div class="holder">
        <input type="radio" name="accordion" id="accordion4">
        <label for="accordion4">Do I need to supply Advanced Passenger Information?</label>
        <div class="content">
          <p>Reque facilis sadipscing nam ea, erroribus iracundia ex ius. Eam paulo graeco philosophia in, agam putent philosophia ei pri. Et his liber nemore adolescens, vero partiendo dignissim eu nam. Dissentiet comprehensam ne his, et cetero nostrud civibus sit. Tale conceptam sea et, te per praesent voluptaria.</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

CSS Code (css/reset.css)
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
html {
 box-sizing: border-box;
}

*, *:before, *:after {
 box-sizing: inherit;
}

* {
  max-height: 1000000px;
  margin: 0;
  padding: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

CSS Code (css/main.css)
/* general */

body {
  font: 400 16px/1.7 'Montserrat', sans-serif;
  color: #333;
}

.container {
  max-width: 640px;
  padding: 0 15px;
  margin: 30px auto;
}

h2 {
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 10px;
}

/* accordion */

Video Tutorial


Updated Code (css/main.css)
/* accordion */

.accordion input[type="radio"] {
  position: absolute;
  left: -9999px;
}

.accordion label {
  display: block;
  cursor: pointer;
  background: #3498db;
  color: #fff;
  padding: 20px 55px 20px 25px;
  position: relative;
}

.accordion label:after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
}

.accordion label:hover {
  background: #1373b3;
}

.accordion .content {
  max-height: 0;
  overflow: hidden;
  padding: 0 25px;
}

.accordion input[type="radio"]:checked ~ .content {
  max-height: 1000px;
  border: 1px solid #1373b3;
  padding: 25px;
  transition: padding 0.3s cubic-bezier(0.1, 4.5, 0.8, 1.5);
}

.accordion input[type="radio"]:checked ~ label {
  background: #1373b3;
}

.accordion input[type="radio"]:checked ~ label:after {
  content: '-';
}

Share this

Related Posts