Acorrdian 2016

What is a acorrdian 2016 How do you make a acorrdian 2016? This script and codes were developed by Milano_O on 14 February 2022, Monday.

How do I make an acorrdian 2016?
  1. Acorrdian 2016 Previews
  2. Acorrdian 2016 HTML Codes
  3. Acorrdian 2016 CSS Codes
  4. Acorrdian 2016 JS Codes
Acorrdian 2016 Previews

Acorrdian 2016 HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>acorrdian 2016</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/1.7.22/css/materialdesignicons.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <section class="section">
  <div class="wrapper">
    <div class="accordion">
      <div class="item">
        <div class="accordion-head">
          <a href="javascript:;">
						Accordion Head 1
						<i class="mdi mdi-chevron-down mdi-24px"></i>
					</a>
        </div>
        <div class="accordion-content">
          <ul>
          <li><a href="javascript:;">Accordian 1</a></li>
          <li><a href="javascript:;">Accordian 2</a></li>
          <li><a href="javascript:;">Accordian 3</a></li></ul>
          </div2>
      </div>
      <div class="item">
        <div class="accordion-head">
          <a href="javascript:;">
						Accordion Head 2
						<i class="mdi mdi-chevron-down mdi-24px"></i>
					</a>
        </div>
        <div class="accordion-content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores qui fugiat tenetur odio quod necessitatibus sint saepe hic quia at dolore modi quisquam rem facilis quos velit quaerat eos recusandae.
          </p>
        </div>
      </div>
      <div class="item">
        <div class="accordion-head">
          <a href="javascript:;">
						Accordion Head 3
						<i class="mdi mdi-chevron-down mdi-24px"></i>
					</a>
        </div>
        <div class="accordion-content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores qui fugiat tenetur odio quod necessitatibus sint saepe hic quia at dolore modi quisquam rem facilis quos velit quaerat eos recusandae.
          </p>
        </div>
      </div>
      <div class="item">
        <div class="accordion-head">
          <a href="javascript:;">
						Accordion Head 4
						<i class="mdi mdi-chevron-down mdi-24px"></i>
					</a>
        </div>
        <div class="accordion-content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores qui fugiat tenetur odio quod necessitatibus sint saepe hic quia at dolore modi quisquam rem facilis quos velit quaerat eos recusandae.
          </p>
        </div>
      </div>
      <div class="item">
        <div class="accordion-head">
          <a href="javascript:;">
						Accordion Head 5
						<i class="mdi mdi-chevron-down mdi-24px"></i>
					</a>
        </div>
        <div class="accordion-content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores qui fugiat tenetur odio quod necessitatibus sint saepe hic quia at dolore modi quisquam rem facilis quos velit quaerat eos recusandae.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>

Acorrdian 2016 CSS Codes

html {
  box-sizing: border-box;
}

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

.section {
  width: 100%;
  float: left;
  font-family: sans-serif;
}
.section .wrapper {
  max-width: 960px;
  margin: 0 auto;
}
.section .wrapper .accordion {
  width: 100%;
  float: left;
}
.section .wrapper .accordion .item {
  width: 100%;
  float: left;
}
.section .wrapper .accordion .item .accordion-head {
  width: 100%;
  float: left;
  background: #a1be53;
  border-bottom: 1px solid #999;
}
.section .wrapper .accordion .item .accordion-head a {
  font-size: 14px;
  line-height: 16px;
  color: #fff;
  text-transform: uppercase;
  display: block;
  width: 100%;
  float: left;
  padding: 10px 10px 10px 10px;
  position: relative;
  text-decoration: none;
}
.section .wrapper .accordion .item .accordion-head a .mdi-chevron-down {
  position: absolute;
  right: 30px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: inline-block;
}
.section .wrapper .accordion .item .accordion-head a.active {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.section .wrapper .accordion .item .accordion-head a.active > .mdi-chevron-down {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: rotate(-180deg) translateY(-50%);
          transform: rotate(-180deg) translateY(-50%);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  top: -15%;
}
.section .wrapper .accordion .accordion-content {
  display: none;
  width: 100%;
  float: left;
  background: #d6d6d6;
}
.section .wrapper .accordion .accordion-content p {
  font-size: 14px;
  line-height: 17px;
  color: #6D6D6D;
  margin-bottom: 10px;
  padding: 10px;
}
.section .wrapper .accordion .accordion-content ul {
  width: 100%;
}
.section .wrapper .accordion .accordion-content ul li {
  width: 100%;
  padding: 0;
  margin: 0;
}
.section .wrapper .accordion .accordion-content ul li a {
  padding: 10px;
  display: block;
  text-decoration: none;
  color: aliceblue;
  border-bottom: 1px solid #eee;
}

Acorrdian 2016 JS Codes

    //accordion
    var heading = '.accordion .item .accordion-head a';
    $(heading).click(function(e) {
      e.preventDefault();
      if (!$(this).parent().hasClass('open')) {
        $('.accordion .item').find('.accordion-content').slideUp('fast');
        $('.accordion .item .accordion-head.open').removeClass('open');
        $(this).parent().addClass('open');
        $(this).parent().next().slideDown('fast');
        // rorate arrow down
        $(this).addClass('active');
        
      } else {
        // rorate arrow down       
        $(this).removeClass('active');       
        $(this).parent().removeClass('open');
        $(this).parent().next().slideUp('fast');
      }    
    });




    //first accrodion item is initially open
//     $(heading).first().click();
//     $(window).load(function() {
//       // calculate max height 
//       function calculateH(col) {
//         var maxH = 0;

//         $(col).each(function(index) {
//           var $this = $(this),
//             totalH = 0;

//           $this.children().each(function() {
//             var $self = $(this);
//             if (!($self.css('position') == 'absolute')) {
//               totalH += $self.outerHeight(true);
//             }
//           });
//           if (maxH < totalH) {
//             maxH = totalH
//           }
//         });
//         $(col).height(maxH);
//       }
//       var columns = '.three-cols-container .col';
//       calculateH(columns);
//       $(window).resize(function() {
//         calculateH(columns);
//       });
//     });
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.