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.
HTML
|
WORKING TO END POVERTY
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.
REFORMING EDUCATION FOR ALL STUDENTS
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.
FIGHTING FOR SOCIAL JUSTICE
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.
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.