Bare Necessity Horizontal Accordion

Developer
Jay
Size
2,964 Kb
Views
4,048
  1. Bare Necessity Horizontal Accordion Previews
  2. Bare Necessity Horizontal Accordion HTML Codes
  3. Bare Necessity Horizontal Accordion CSS Codes
  4. Bare Necessity Horizontal Accordion JS Codes

How do I make an bare necessity horizontal accordion?

This simple accordion is made to accommodate a slightly different behaviour than currently available accordions out there.. What is a bare necessity horizontal accordion? How do you make a bare necessity horizontal accordion? This script and codes were developed by Jay on 14 January 2023, Saturday.

Bare Necessity Horizontal Accordion Previews
IQ Test

Bare Necessity Horizontal Accordion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bare Necessity Horizontal Accordion</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="items"> <div class="item"> <div class="content">Item 1</div> </div> <div class="item">	<div class="content">Item 2</div> </div> <div class="item">	<div class="content">Item 3</div> </div> <div class="item">	<div class="content">Item 4</div> </div> <div class="item">	<div class="content">Item 5</div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Bare Necessity Horizontal Accordion - Script Codes CSS Codes

.items { width: 100%; height: 200px;
}
.items .item { width: 100%; height: 200px;
}
.items .item .content { padding: 10px;
}
.items .item:hover { cursor: pointer;
}
.items .item:nth-child(1) { background-color: #FF0000;
}
.items .item:nth-child(2) { background-color: #FF3300;
}
.items .item:nth-child(3) { background-color: #FF6600;
}
.items .item:nth-child(4) { background-color: #FF9900;
}
.items .item:nth-child(5) { background-color: #FFBB00;
}
.items .item .accordion-close { position: absolute; top: 10px; right: 10px;
}

Bare Necessity Horizontal Accordion - Script Codes JS Codes

$.fn.horzAccordion = function(options) { // Settings and variables. var settings = $.extend({ elementSelector: ".item", closeText: 'close', onOpen: function($el) {}, onClose: function($el) {} }, options ); var $elements = this.find(settings.elementSelector); var $mainEl = this; // This is where we add useful css related to this accordion. this.css('position', 'relative'); this.css('overflow', 'hidden'); $elements.css('position', 'absolute'); $mainEl.css('height', $($elements).height()); // Foreach element... for (var i=0;i<$elements.length;i++) { // Add the close button. $('<a href="#" class="accordion-close">'+settings.closeText+'</a>').appendTo($elements[i]); // And adjust left position. $($elements[i]).css('left', (i * (100 / $elements.length))+'%'); $($elements[i]).click(function(e) { // This is what happens when an item is clicked. $(this).nextAll().removeClass('active'); $(this).prevAll().removeClass('active'); $(this).addClass('active'); $(this).animate({'left': 0}); $(this).nextAll().animate({'left': '100%'}); settings.onOpen($(this)); return false; }); $($elements[i]).find('.accordion-close').click(function(e) { // This is what happens when close button clicked. var $curEl = $(this).closest(settings.elementSelector); if ($curEl.hasClass('active')) { // Basically we animated the left style back to item's original. var index = $mainEl.find(settings.elementSelector).index($curEl); $curEl.animate({'left': (index * (100 / $mainEl.find(settings.elementSelector).length)) + '%'}, function(ev) { $curEl.removeClass('active'); }); settings.onClose($curEl); // Then revert all left position of elements after the one being clicked. $curEl.nextAll().each(function(id, el) { var index = $mainEl.find(settings.elementSelector).index($(el)); $(el).animate({'left': (index * (100 / $mainEl.find(settings.elementSelector).length)) + '%'}); }); } e.stopPropagation(); return false; }); }
};
// This is how to use this plugin:
$('.items').horzAccordion({ 'elementSelector': '.item', 'closeText': 'close'
});
Bare Necessity Horizontal Accordion - Script Codes
Bare Necessity Horizontal Accordion - Script Codes
Home Page Home
Developer Jay
Username jaycode
Uploaded January 14, 2023
Rating 3.5
Size 2,964 Kb
Views 4,048
Do you need developer help for Bare Necessity Horizontal Accordion?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jay (jaycode) Script Codes
Name
Is Mobile
Smoothwheel
Wait until all interchange images loaded
Hover with css triangle as transparent arrow
A Pen by Jay
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!