JavaScript Horizontal Accordions Hover Expend

by Posted on

This is one of the most beautiful JavaScript Horizontal Accordion examples. Three panels are given to you which is apart by a slanted line. As the name refers, this one has a hover effect. So as soon as you hover over any of the panes, the content shows up wonderfully.Also an amazing background is present which adds more beauty to the design.
JavaScript Horizontal Accordions Hover Expend

HTML

<div class="container">
 <div class="row">
   <div class="accord-wrapper">
 
     <div class="div1">
       <div class="accord-content">
         <h2><span>WORKING</span> TO END POVERTY</h2>
         <div class="smoky">
           Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat.
         </div>
       </div>
     </div>
 
     <div class="div2">
       <div class="accord-content">
         <h2><span>REFORMING</span> EDUCATION FOR ALL STUDENTS</h2>
         <div class="smoky">
           Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat.
         </div>
       </div>
     </div>
 
     <div class="div3">
       <div class="accord-content">
         <h2><span>FIGHTING</span> FOR SOCIAL JUSTICE</h2>
         <div class="smoky">
           Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat.
         </div>
       </div>
     </div>
 
   </div>
 </div>
</div>


CSS

.div1, .div2, .div3 {
  width: 33.333%;
}
 
.widthlow{
  width: 12%;
}
 
.widthmax{
  width: 76%;
  transition: width 1s;
}
 
.widthlow h2, .widthmax h2 {
  opacity: 0;
}
 
.widthmax:hover .smoky {
  opacity: 1;
  -webkit-transition-property: opacity; /* Safari */
  -webkit-transition-duration: 0.5s; /* Safari */
  -webkit-transition-delay: 0.5s; /* Safari */
  transition-property: opacity;
  transition-duration: 0.5s;
  transition-delay: 0.5s;
}
 
.accord-wrapper {
  background-image: url(https://images.pexels.com/photos/1020315/pexels-photo-1020315.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  height: 400px;
}
 
.accord-wrapper > div {
  float: left;
  transition: width 0.5s ease-in-out;
  -moz-transform: skew(-20deg, 0);
  -ms-transform: skew(-20deg, 0);
  -webkit-transform: skew(-20deg, 0);
  transform: skew(-20deg, 0);
  -moz-transform: skew(-20deg, 0deg);
  -ms-transform: skew(-20deg, 0deg);
  -webkit-transform: skew(-20deg, 0deg);
  padding-right: 1%;
  background-color: transparent;
 
}
 
.accord-content {
  color: #fff;
  padding: 35px;
  height: 400px;
  display: flex;
  align-items: center;
  text-align: center;
}
 
.accord-content h2 {
  color: #66a5ff;
  font-style: normal;
  -moz-transform: skew(20deg, 0);
  -ms-transform: skew(20deg, 0);
  -webkit-transform: skew(20deg, 0);
  transform: skew(20deg, 0);
  -moz-transform: skew(20deg, 0deg);
  -ms-transform: skew(20deg, 0deg);
  -webkit-transform: skew(20deg, 0deg);
  max-width: 232px;
  margin: 0 auto;
  text-align: left;
  font-family: "proxima-nova",sans-serif;
  font-weight: 700;
  font-size:28px;
  -webkit-transition-property: opacity; /* Safari */
  -webkit-transition-duration: 0.2s; /* Safari */
  -webkit-transition-delay: 0.2s; /* Safari */
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-delay: 0.2s;
}
 
.accord-content h2 span {
  color: #fff;
}
 
.div1 .accord-content {
  position: relative;
  z-index: 1;
}
 
.div1:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -74px;
  height: 100%;
  width: calc(100% + 60px);
  background-color: rgba(7, 7, 79, 0.6);
}
 
.div2 .accord-content {
  background: none;
  position: relative;
  z-index: 1;
}
 
.div2:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(7, 7, 79, 0.6);
}
 
.div3:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -74px;
  height: 100%;
  width: calc(100% + 60px);
  background-color: rgba(7, 7, 79, 0.6);
}
 
.div3 .accord-content {
  background: none;
  position: relative;
  z-index: 1;
}
.accord-content {
  position: relative;
}
 
.accord-content .smoky {
        -moz-transform: skew(20deg, 0deg) translateX(-50%);
    -ms-transform: skew(20deg, 0deg) translateX(-50%);
    -webkit-transform: skew(20deg, 0deg) translateX(-50%);
    transform: skew(20deg, 0deg) translateX(-50%);
    -moz-transform: skew(20deg, 0deg) translateX(-50%);
    -ms-transform: skew(20deg, 0deg) translateX(-50%);
    -webkit-transform: skew(20deg, 0deg) translateX(-50%);
    font-family: "proxima-nova",sans-serif;
    font-size: 22px;
    position: absolute;
    left: calc(50% + 60px);
    width: 100%;
    padding-right: 90px;
    opacity: 0;
      }


JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(".div1").on({
    mouseenter: function() {
        console.log('hello');
        $('.div2, .div3').addClass('widthlow');
        $('.div1').addClass('widthmax');
        $(".widthmax").addClass('opacity');
    },
    mouseleave: function() {
        $('.div2, .div3').removeClass('widthlow');
        $('.div1').removeClass('widthmax');
        $('.div1').removeClass('opacity');
    }
});
 
$(".div2").on({
    mouseenter: function() {
        console.log('hello');
        $('.div1, .div3').addClass('widthlow');
        $('.div2').addClass('widthmax');
        $('.widthmax').addClass('opacity');
    },
    mouseleave: function() {
        $('.div1, .div3').removeClass('widthlow');
        $('.div2').removeClass('widthmax');
        $('.div2').removeClass('opacity');
    }
});
 
$(".div3").on({
    mouseenter: function() {
        console.log('hello');
        $('.div1, .div2').addClass('widthlow');
        $('.div3').addClass('widthmax');
        $('.widthmax').addClass('opacity');
    },
    mouseleave: function() {
        $('.div1, .div2').removeClass('widthlow');
        $('.div3').removeClass('widthmax');
        $('.div3').removeClass('opacity');
    }
});
</script>

See live demo and download source code.
|

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by immad-hamid. Visit their official repository for more information and follow for future updates.

Published by admin