About this:
This Horizontal Accordion Slider looks fancy and allows you to have more content in one view.
Note: This content is is quite difficult to edit without CSS knowledge. This is why it’s under “Custom Coding” category.
Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sapien euismod, dapibus erat sed, accumsan ipsum. Quisque laoreet, nisi at ultricies luctus.
Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sapien euismod, dapibus erat sed, accumsan ipsum. Quisque laoreet, nisi at ultricies luctus.
Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sapien euismod, dapibus erat sed, accumsan ipsum. Quisque laoreet, nisi at ultricies luctus.
Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sapien euismod, dapibus erat sed, accumsan ipsum. Quisque laoreet, nisi at ultricies luctus.
Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sapien euismod, dapibus erat sed, accumsan ipsum. Quisque laoreet, nisi at ultricies luctus.
The HTML
Each panel exists out of a column (1) and contains a Banner with Text Box, a Stack element and within an image and text. The background image of the banner, the image and the text can be changed to your liking. Keep in mind that this may be difficult in the UX Builder as the styling/classes prevent you from seeing the text regularly as you would in front end. You will have to navigate the left sidebar in the UX Builder to edit these items.
The columns contain the class option. Only the first column also contains the class active as that is the one that is open from the start.
[row class="options"]
[col span="1" span__sm="12" padding="0px 0px 0px 0px" class="option active"]
[ux_banner height="500px" height__sm="450px" bg="1573" bg_overlay="rgba(0, 0, 0, 0)"]
[text_box width="95" position_x="50" position_y="95" position_y__sm="0" position_y__md="85" class="label"]
[ux_stack direction__sm="col" align="center" gap="2.5" gap__sm="1.25" class="label"]
[ux_image id="1569" image_size="medium" width="50" class="icon"]
[ux_text text_align="left" class="info"]
Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sapien euismod, dapibus erat sed, accumsan ipsum. Quisque laoreet, nisi at ultricies luctus.
[/ux_text]
[/ux_stack]
[/text_box]
[/ux_banner]
[/col]
[col span="1" span__sm="12" padding="0px 0px 0px 0px" class="option"]
[ux_banner height="500px" height__sm="450px" bg="1574" bg_overlay="rgba(0, 0, 0, 0)"]
[text_box width="95" position_x="50" position_y="95" position_y__sm="0" position_y__md="85" class="label"]
[ux_stack direction__sm="col" align="center" gap="2.5" gap__sm="1.25" class="label"]
[ux_image id="1572" image_size="medium" width="50" class="icon"]
[ux_text text_align="left" class="info"]
Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sapien euismod, dapibus erat sed, accumsan ipsum. Quisque laoreet, nisi at ultricies luctus.
[/ux_text]
[/ux_stack]
[/text_box]
[/ux_banner]
[/col]
[col span="1" span__sm="12" padding="0px 0px 0px 0px" class="option"]
[ux_banner height="500px" height__sm="450px" bg="1576" bg_overlay="rgba(0, 0, 0, 0)"]
[text_box width="95" position_x="50" position_y="95" position_y__sm="0" position_y__md="85" class="label"]
[ux_stack direction__sm="col" align="center" gap="2.5" gap__sm="1.25" class="label"]
[ux_image id="1568" image_size="medium" width="50" class="icon"]
[ux_text text_align="left" class="info"]
Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sapien euismod, dapibus erat sed, accumsan ipsum. Quisque laoreet, nisi at ultricies luctus.
[/ux_text]
[/ux_stack]
[/text_box]
[/ux_banner]
[/col]
[col span="1" span__sm="12" padding="0px 0px 0px 0px" class="option"]
[ux_banner height="500px" height__sm="450px" bg="1575" bg_overlay="rgba(0, 0, 0, 0)"]
[text_box width="95" position_x="50" position_y="95" position_y__sm="0" position_y__md="85" class="label"]
[ux_stack direction__sm="col" align="center" gap="2.5" gap__sm="1.25" class="label"]
[ux_image id="1571" image_size="medium" width="50" class="icon"]
[ux_text text_align="left" class="info"]
Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sapien euismod, dapibus erat sed, accumsan ipsum. Quisque laoreet, nisi at ultricies luctus.
[/ux_text]
[/ux_stack]
[/text_box]
[/ux_banner]
[/col]
[col span="1" span__sm="12" padding="0px 0px 0px 0px" class="option"]
[ux_banner height="500px" height__sm="450px" bg="1577" bg_overlay="rgba(0, 0, 0, 0)"]
[text_box width="95" position_x="50" position_y="95" position_y__sm="0" position_y__md="85" class="label"]
[ux_stack direction__sm="col" align="center" gap="2.5" gap__sm="1.25" class="label"]
[ux_image id="1570" image_size="medium" width="50" class="icon"]
[ux_text text_align="left" class="info"]
Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sapien euismod, dapibus erat sed, accumsan ipsum. Quisque laoreet, nisi at ultricies luctus.
[/ux_text]
[/ux_stack]
[/text_box]
[/ux_banner]
[/col]
[/row]The CSS styling
The styling is tough if you have little to no CSS knowledge. I have added some styling to keep it responsive but may need editing for your particular layout. You can fiddle with this CSS yourself as it does not break your site if something goes wrong. Just reset it and all should be good again.
/** Custom Slide **/
.options {
display: flex;
flex-direction: row;
align-items: stretch;
overflow: hidden;
width: calc(100% - 100px);
}
.options .option {
position: relative;
overflow: hidden;
min-width: 50px;
margin: 0 10px;
padding:0;
background-size: 120%;
cursor: pointer;
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
border: 1px solid rgba(246, 243, 229,0.1);
}
.option .fill{
height: 102%;
}
.options .option:not(.active) {
flex-grow: 1;
border-radius: 30px;
}
.options .option.active{
flex-grow: 10000;
transform: scale(1);
max-width: 800px;
margin: 0px;
border-radius: 40px;
background-size: auto 100%;
}
.options .option.active .overlay {
background: linear-gradient(0deg, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 70%);
}
.res-text{
font-size:inherit!important;
}
.option .label{
height:150px!important;
}
.option.active .info{
opacity:1;
transition: all 0.5s ease;
transition-delay:0.4s;
}
.option:not(.active) .info{
opacity: 0;
transition: all 0s ease;
transition-delay:0s;
}
.option .icon, .option .img-inner, .option img{
width: 99px!important;
}
@media screen and (max-width: 600px) {
.options {
width: calc(100% - 10px);
}
.options .option{
transition: max-height 0.5s ease;
}
.options .option.active{
max-height: 900px;
transition: max-height 0.5s ease;
}
.options .option:not(.active) {
max-height: 150px;
transition: max-height 0.5s ease;
}
.options .option:not(.active) .icon img{
max-height:100px;
width:auto!important;
}
.options .option:not(.active) .icon::after{
content: "25bc";
color:#fff;
}
}The Script
Now for the last and easiest part. Copy and paste the script into your Footer scripts.
<script>
jQuery(function(){
jQuery(".option").click(function(){
jQuery(".option").removeClass("active");
jQuery(this).addClass("active");
});
});
</script>
Stay Connected
Flatsome is the perfect theme for your shop, company websites or client websites. It has all the tools needed to create super fast responsive websites with amazing user experience.
Starting a project?
Looking to start a website project for a new Flatsome website or webshop? Already got a Flatsome site but looking to redesign it?
Got a question?
Want to ask a question of request more information on what we do within Flatsome? Shoot us a message or feedback.