Simple Accordion using JQuery

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 with JQuery</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>JQuery Accordion</h2>
      <!-- 1st holder -->
      <div class="holder">
        <div class="title active">
          <a href="#">Can I change my holiday?</a>
        </div>
        <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">
        <div class="title">
          <a href="#">What do I do if my contact details have changed?</a>
        </div>
        <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">
        <div class="title">
          <a href="#">What happens if I change my name after booking?</a>
        </div>
        <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">
        <div class="title">
          <a href="#">Do I need to supply Advanced Passenger Information?</a>
        </div>
        <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>
  <!-- using jquery library -->
  
  <!-- importing custom js -->
  <script src="js/main.js"></script>
</body>

</html>

CSS Code (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 */

.accordion {
  margin: 0 0 50px;
}

.accordion .title a {
  text-decoration: none;
  background: #ff7675;
  color: #fff;
  padding: 20px 55px 20px 25px;
  display: block;
  position: relative;
  transition: background 0.3s linear;
}

.accordion .title a:after {
  content: '';
  border-style: solid;
  border-width: 2px 2px 0 0;
  border-color: #fff #fff transparent transparent;
  width: 10px;
  height: 10px;
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%) rotate(135deg);
}

.accordion .title a:hover,
.accordion .title.active a {
  background: #d84544;
}

/* active state */

.accordion .title.active a:after {
  transform: translateY(-50%) rotate(-45deg);
}

.accordion .content {
  border: 1px solid #ff7675;
  padding: 25px;
}

Video Tutorial


Update Codes
HTML Code (index.html)
<body>
  <div class="container">
    ....
    ....
    ....
  </div>
  <!-- using jquery library -->
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"></script>
  <!-- importing custom js -->
  <script src="js/main.js"></script>
</body>

</html>

Jquery Code (main.js)
/*
accordion
---------
*/

$('.content').hide(); // hiding all contents
$('.content').first().show(); // showing first content

// adding click events
$('.title').click(function(event) {
  event.preventDefault(); // default action of the event will not be triggered

  // set or remove active class
  $('.active').removeClass('active'); // remove active class if clicked on another element
  $(this).addClass('active'); // adding active class upon each click

  $('.content').slideUp(); // rest of the content to be slided up
  $(this).next().slideDown(); // when clicking on each title, it's next element is to be slided down
});

Share this

Related Posts